H1 внутри DIV откуда берется отступ

[ekkl]

Есть участок кода

<div class="topblue">                <h1><?= $csm ?></h1>            </div>            <ul class="breadcrumbs">                <li><a href="#">111111</a></li>                <li><a href="#">Фотографии</a></li>                <li><a href="#">Море</a></li>                <li class="current"><a href="#">Главные фотки на странице</a></li>            </ul>

Стили

.topblue {  background-color: #e6f1f8;  /*   padding: 2px $column-gutter;*/}

h1, h2, h3, h4, h5, h6 {  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;  font-weight: normal;  font-style: normal;  color: #222222;  text-rendering: optimizeLegibility;  margin-top: 0.2rem;  margin-bottom: 0.5rem;  line-height: 1.4;}

Я понимаю, что для H1  задан отступ внизу, но не могу понять, заголовок-то размещён внетри ДИВа, которые залит голубым. Почему отступ получается между этим ДИВом и <ul class="breadcrumbs">

Edited March 31, 2014 by ekkl

[Great Rash]

Это называется "схлопывание маргинов". Чтобы победить такое поведение надо задать для <div> стиль overflow: hidden;, или назначить padding, или border

[ekkl]

Да, действительно, когда я задавал padding или heigth для дива, то отображалось нормально.

А это какая-то особенность, или баг?

[Great Rash]

Особенность маргинов.

[SelenIT]

Это специально придуманное поведение. Подробнее — http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/ (после «Отчего так»).