The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Margin difference between Chrome and other browsers Reply To: Margin difference between Chrome and other browsers


This might be a bug in WebKit where it fails to collapse top margin of a floated child element in this specific case (which I believe would be the correct behavior). Without getting too much into details the simple way to fix this is to add:

.portfolio {
  padding-top: 1px;

And then the margin is calculated the same way in all browsers.

In case you don’t know how margins work, they collapse so that only the biggest one counts. So if you put block element with a bottom margin of 2em and the next block element right after it has a top margin of 1em, then the margin between the elements is 2em.

Margin from child elements is also moved to a parent element. So if the first child element in the margin-top: 1em; block element is another block element, but it has a top margin of 3em, then the margin between the 2em and 1em elements will be 3em. The 3em child element instead starts right from the top of the 1em element.

But then there are exceptions. If you add top padding to the 1em element then the child element’s top margin can’t collapse to play with the 2em element. If padding is 1px then you’d end up seeing 2em margin between the block elements, 1px top padding of the 1em element and then 3em top margin of the first child element.

This sounds quite complex when written like this, but it is a simple concept once you get the hang of it.