I insert a block and give it a margin-top: 50px - and it shifts the parent body in this case. Why it happens?

If, however, give padding-top: - then ok

* { margin: 0; padding: 0; } body { outline: 1px solid red; } .logo-bg { outline: 1px solid orange; width: 100px; height: 100px; margin-top: 50px; } 
 <div class="logo-bg"> <a href="#" class="logo">Logotype</a> </div>

  • I also had no answer, the only thing that saved the situation, I asked the problem email in your case - "logo-bg" display: inline-block will not come as an answer, because I do not know the answer to the question "why" .... I would also like to know the exact answer - Air
  • @Air solves the padding-top question instead of the margin-top, but I wonder why) - user190134
  • And here is the answer))))) - Air

2 answers 2

This is called Dropout of indents (margins).

If inside the parent block to place the block and set the indent from above, the inner block will press against the upper edge of the parent, and the parent element will have indent from the top. Those. the top margin of the inner element “drops out” of the parent element.

If the parent element also had an external indent, then the maximum indent between its own and “dropped out” will be chosen. To get rid of the dropout effect, you can set the parent element to indent (padding) on ​​top or add a frame on top (border-top: 1px solid transparent).

External and internal indents are always added.

  • By the way, here is a good article on the use of external and internal indents habrahabr.ru/post/340420 - websnap
  • Thank you very much! Also ran into this problem. Now I know how to solve it)) - JustLearn

It looks like a kind of "collapse". There is more detailed info here. In this example, it is enough to replace the body outline with a border or specify padding .