collapsed vertical margins

if an autoheigh block level normal flow element has ony block-level children, then its default height will be the distance from the top of the topmost block level childs outer border edge to the bottom of the bottommost block-level child's outer border edge. Figure 1-1

by fezec

HTML

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<h1>Above is F1-1</h1>

<ul id="border-helps-me-realize-my-childrens-height">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<h1>Above is F1-2</h1>

SCSS

ul{
 margin-bottom:15px;   
 
    li{
        margin:10px 0 20px 0;
}
}

h1{
    margin:28px 0 0 0;
}

#border-helps-me-realize-my-childrens-height{
    border:1px solid red;
    margin-top:28px;
}