Почему обрезается div?

Question

[amidart]

Мне кажется, вопрос элементарен, просто я не знаю каких-то основ. Объясните, пожалуйста, поведение.
Вот простейший html-код:

  <div id="aa">
    <div id="bb">bb</div>
  </div>

с вот таким стилем:

    #aa {background-color: #555; border: solid 2px red;}
    #bb {background-color: #ccc; height: 100px; width: 50%; margin: 50px;}

Если у блока #aa есть рамка, то я вижу такой результат (такой результат я и жду):


Если же убрать рамку, то куда-то пропадает часть блока (обрезается по высоте вложенного блока):


Такое происходит во всех браузерах, стало быть это стандарт.
Тот же эффект будет, если применять к #aa свойство padding или вписать какой-нибудь текст.

Answer 1

[Stdit]

Блок bb заявляет, что любой блок должен быть от него на расстоянии не менее 50 прикселей. Родительского блока это не касается. Для отступов от границ родительского блока, у родителя должны быть поля (padding) jsfiddle.net/JyHCd/ или родительский блок должен ограничивать взаимодействие вложенных блоков за своими границами (overflow jsfiddle.net/JyHCd/1/ ). Ещё в некоторых специфических случаях допустим такой вариант: jsfiddle.net/JyHCd/2/

Comments

[Stdit]

Да, забыл дать ссылку на «основы»: www.w3.org/TR/CSS2/box.html#collapsing-margins

[amidart]

но почему же тогда при наличии рамки срабатывает margin?

[Stdit]

Two margins are adjoining if and only if:
* no line boxes, no clearance, no padding and no border separate them

Answer 2

[Nesvet]

Есть такое дело.
Используйте overflow: auto для внешнего блока.

Answer 3

[nikel303]

Ещё, как вариант, можно добавить отступы у родительского элемента, например:

padding: 1px 0;

А у внутреннего элемента выравнивание сделать на 1px меньше, например:

margin: 49px 50px;

Answer 4

[egorinsk]

Это так и должно быть — www.w3.org/TR/CSS21/box.html#collapsing-margins. Все бы ничего, но в Ие6-7, в зависимости от haslayout у внутреннего/внешних блоков, это эффект ведет себя абсолютно по-разному потому от него надо избавляться. Замените margin на padding или Добавьте к внешнему блоку 1px padding сверху и снизу.