HTML and CSS Reference
In-Depth Information
One more thing you should know about flow and boxes
Let's zoom in just a bit and look at one more aspect of how the browser lays
out block and inline elements. It turns out that the browser treats margins
differently depending on which type of element is being placed on the page.
When the browser is placing two inline
elements next to each other…
When the browser has the task of placing two inline elements side by side, and
those elements have margins, then the browser does what you might expect. It
creates enough space between the elements to account for both margins. So,
if the left element has a margin of 10 pixels and the right has a margin of 20
pixels, then there will be 30 pixels of space between the two elements.
margin
margin
Here we've got two images side by
side, and images are displayed as inline
elements by default. So, the browser
uses both of their margins to calculate
the space that goes between them.
When the browser is placing two block
elements on top of each other…
Here's where things get more interesting. When the browser places two block
elements on top of each other, it collapses their shared margins together. The height
of the collapsed margin is the height of the largest margin.
Their shared margin is
the size of the larger
of the two margins.
Say the top element's
bottom margin is 10
pixels, and the bottom
element's top margin
is 20 pixels. Then the
collapsed margin will be
20 pixels.
When the browser
places two block
elements on top
of each other, it
collapses their
margins.
