Margin Changes Using JQuery UI Sortable

Question

If you drag several elements, you will notice that the border between some elements becomes thinner. How can i fix this?

Example:

http://jsfiddle.net/fKQsG/

Answer 1

See, LI has the property display: inline; which will also count spaces. Replace it with float: left; and it will work.

 #sortable1 li, #sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 50px; float: left; list-style-type:none; background:black; } 

I changed width: 50px; float: left; width: 50px; float: left; .

Updated script: http://jsfiddle.net/fKQsG/1/