Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The reason overflow:auto changes the parent div to allow the nested margin-top is that <strong>it creates a new formatting context. Any div that's positioned absolute, fixed, floated or with overflow other than visible creates a new formatting context.</strong> The parent div then becomes the root of this new formatting context, and collapsing margins don't apply to root elements.</p> <p>More in depth:</p> <p>Formatting contexts can be either inline or block, and only the block formatting contexts collapse their margins. These formatting contexts form the flow of the document.</p> <p>A block formatting context is simply all the block level elements (e.g. divs, p, table) laid out one after another vertically within a containing block until the end of the document/container or until a new formatting context is established.</p> <p>In the case of nesting, the margin-top of the child collapses with the margin-top of the parent since both divs are part of a block formatting context. By setting overflow to auto, the parent div becomes the container of the new formatting context, and the child the first block element within it. Thus the two margins are no longer "adjoining" since the parent div is now the root.</p> <p>Hope that helps.</p> <p>Box model: <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">http://www.w3.org/TR/CSS2/box.html#collapsing-margins</a></p> <p>Visual formatting model: <a href="http://www.w3.org/TR/CSS2/visuren.html#normal-flow">http://www.w3.org/TR/CSS2/visuren.html#normal-flow</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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