A few days ago, Bjorn showed me some weird CSS behavior: if you have a child element with margins and you set the parent’s padding to zero, the child’s margins will collapse. This is apparently part of the CSS spec. I thought it unlikely that browsers would implement arbitrary-precision decimal arithmetic for styling calculations, so I was curious to see how close I could set the padding to zero before browsers rounded down.

Assuming you have JavaScript enabled, you’ll know the answer for your own browser below.

Use Web Inspector or Firebug or whatever to verify my claims. You’ll notice the top blue box’s padding is close to zero, but not quite. The bottom box’s padding is slightly larger, putting it over the threshold and not collapsing the child’s margins.

The exact padding depends on your browser. Chrome’s Planck length is 1/64th of a pixel. The reason for this is explained on Webkit’s LayoutUnit page. Firefox uses about 1/120th of a pixel, but I have no idea why. Safari doesn’t care about anything less than 0.99 pixels. This seems fitting for a browser made by Apple. Surprisingly, Internet Explorer 8’s resolution is 1/100th of a pixel.

It shouldn’t need mentioning, but do not use this for browser detection. Browser detection is bad, but if you’re going to do it, use a more reliable method.