Actually in the first example we denote the border, in the second we remove. Look what happened: Example 1:
Here is parent parent border:

#parent { position: relative; margin-top: 24px; box-shadow: 0px 0px 20px 0px #000000; border: solid 1px #ff3333; /*вот он*/ width: 600px; height: 400px; background-color: #000000; } #child { position: relative; margin-top: 100px; height: 240px; width: 320px; background-color: #0FF000; } 
 <div class="container page-container" id="parent" align="center"> <div id="child"></div> </div>

[demo]

Example 2:
Here the parent has no border

  #parent { position: relative; margin-top: 24px; box-shadow: 0px 0px 20px 0px #000000; border: solid 0px #ff3333; /*вот его нет*/ width: 600px; height: 400px; background-color: #000000; } #child { position: relative; margin-top: 100px; height: 240px; width: 320px; background-color: #0FF000; } 
 <div class="container page-container" id="parent" align="center"> <div id="child"></div> </div>

[demo 2]

Attention question: What is the reason for this behavior of the parent and child object?

PS already to the project admins: The requirement to insert the code from jsfiddle is very inconveniently implemented. Collect code from all four frames? Very uncomfortable.

  • 3
    a little distracted - Собирать воедино код из всех четырёх фреймов? Очень неудобно. Собирать воедино код из всех четырёх фреймов? Очень неудобно. - the editor has a button on the top panel, if you haven't noticed, for the future: Фрагмент кода на Javascript/HTML/CSS or Ctrl + M hot key .... everything is like jsfiddle ;-) ..... in As a result, you can see the executed code directly on the site ... as I have now corrected - Alexey Shimansky
  • Thanks, I'll keep it in mind. - I_CaR
  • And what kind of behavior do you expect, specifying the thickness of the border equal to 0 directly in your code: border: solid 0px #ff3333; ? - VenZell
  • four
    If you are about the indent of the descendant from the upper edge of the parent, then you should read about the "collapsing indents": this is not the case. - VenZell

2 answers 2

All right

  1. The margin works inside the block as there are restrictions in the block (border, padding, overflow: hidden), as well as clearing the stream
  2. Margins collapse and move the block down as it should be

Therefore, they use clearfix and TP in order for the blocks to be of a “normal” size, although the essence of the reverse is to give the opportunity to shove the blocks where they don’t want to be thrust.

... Wrote all not technically, for the technical part in the W3C.

    The upper and lower margins of the blocks are sometimes converted (collapsed) into one border, the larger of the two corresponding. This behavior is called margin collapsing .

     | A | |_______| | A | - |_______| - margin-bottom станет - общая граница, равная большей - -----------> - из двух, т.е. margin-bottom --------- _______ - _______ - margin-top | B | | B |

    The collapse of boundaries occurs in three cases, as well as when these cases are combined.

    Adjacent descendants of the same parent

    The boundaries of adjacent elements of the same parent collapse (except when the subsequent element is cleared (clear) from the previous floating elements (float) elements).

    Parent and first / last offspring (case considered in question)

    If there is no border (border), inner padding (padding), linear content, or clear (clear) to separate the block-top margin from the first-child’s margin-top margin or not, the linear content inner margins, height, min-height or max -height to separate the margin-bottom block from the margin-bottom of its last descendant, then their borders collapse. The resulting border will be located outside the parent element.

    Empty blocks

    If there is no frame, indentation, linear content, the specified height or min-height property, to separate the margin-top of the block from its margin-bottom, then the upper and lower bounds collapse.

    Borders of floating and absolutely positioned elements never collapse.

    The answer is based on the article " Mastering margin collapsing ".