Chrome bug: margin-bottom to the browser edge?

Wrap your whole site (or just the area that has the margin you want to capture) in a

<div style="overflow:auto;"></div>

If setting padding does not appeal to you, try the above. I didn't want to set padding, because a margin on the bottom of boxes is my standard way of making room for the next box when data is dynamic and I don't know whether there will be one.

Margins will not "bleed through" a box with overflow specified, so this fixes the problem in Chrome by allowing that last box to have margin inside the new overflow:auto div.

This change is inconsequential to the other browsers who were blocking that margin bleed anyway. I tested in IE 8 and up for regressions on that side and found none.


add a padding-bottom to the element containing your div, even if it's the body element. This works in all browsers, so you will have to remove the bottom margin from the div.


On Google Chrome {padding-bottom: XXpx;} doesn't work, but {padding-bottom: XXem;} does.

Note the first uses pixels and second ems.