StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This may be due to a box model feature known as 'collapsing margins'. Individually, these elements should return their proper calculated heights, but when margins collapse as stacked, the result may account for your discrepancy.</p> <p>Here's an excellent article describing the scenario: <a href="http://reference.sitepoint.com/css/collapsingmargins" rel="nofollow noreferrer">http://reference.sitepoint.com/css/collapsingmargins</a></p> <blockquote> <p>In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.</p> <p>This behavior is best demonstrated with a short example. Consider the following code:</p> </blockquote> <pre><code>h1 { margin: 0; background: #cff; } div { margin: 40px 0 25px 0; background: #cfc; } p { margin: 20px 0 0 0; background: #cf9; } <h1>Heading Content</h1> <div> <p>Paragraph content</p> </div> </code></pre> <p><img src="https://i.stack.imgur.com/6ACOe.png" alt="enter image description here"></p> <p>Further info can be found at the W3C Box Model spec: <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a></p> <blockquote> <p>When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.</p> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload