Why is the div being cut off?

Question

css

It seems to me that the question is elementary, I just do not know some basics. Please explain the behaviour.
Here is the simplest html code:

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

with this style:

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

If the #aa block has a frame, then I see the following result (I expect this result):


If the frame is removed, then part of the block disappears somewhere (cut to the height of the nested block):


This happens in all browsers, so this standard.
The same effect will be if applied to #aaa property paddingor enter some text.

Answer 1

Block bb states that any block must be at least 50 pixels away from it. This does not apply to the parent block. For padding from the parent block boundaries, the parent must have padding jsfiddle.net/JyHCd/ or the parent block must limit the interaction of nested blocks beyond its borders (overflow jsfiddle.net/JyHCd/1/ ). In some specific cases, this option is also acceptable: jsfiddle.net/JyHCd/2/

Answer 2

There is such a thing.
Use overflow: autofor outdoor unit.

Answer 3

Also, as an option, you can add indents to the parent element, for example:

padding: 1px 0;

And for the inner element, make the alignment 1px smaller, for example:

margin: 49px 50px;

Answer 4

This is how it should be - www.w3.org/TR/CSS21/box.html#collapsing-margins . Everything would be fine, but in Ie6-7, depending on the haslayout of the inner / outer blocks, this effect behaves completely differently, so you need to get rid of it. Replace margin with padding OR Add 1px top and bottom padding to the outer box.