Маржа не реализована из родительского элемента

Я играл с css:

<body >
<div style="background-color:lightblue;">
<div style= "margin-bottom : 40px;">This is some text in a div element</div>
</div>
<div style="background-color:red;"> hdjj</div>
</body>

Этот код отделяет тег div от второго div, а не от дочернего div. Почему это так?


html css border margin
person Laveena    schedule 27.03.2020    source источник
comment
Найдите SO или Google для коллапса маржи   -  person Rob    schedule 27.03.2020
comment
@Rob, не могли бы вы проверить вопрос, я внес некоторые изменения.   -  person Laveena    schedule 27.03.2020
comment
@ Роб Нет. Я уже знаю концепцию коллапса маржи. Здесь я сомневаюсь, почему во втором случае поле дочернего div вычисляется из тега html, а почему не из тега body?   -  person Laveena    schedule 27.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Это происходит из-за обрушения маржи. Схлопывание поля просто означает, что если какой-либо элемент идет после другого или внутри другого, будучи первым или последним элементом внутри, тогда поле (верхнее или нижнее), касающееся другого элемента или родителя, просто рухнет внутри поля другого или родителя и просто большего поля. победит. В этом случае у дочернего элемента нижнее поле свернуто с отступом родителя, и все это приводит к тому, что у дочернего элемента нет поля, но есть родитель, но как только вы применяете границу, поле дочернего элемента запрещается сворачиваться с родителем, так как граница находится между ними.

person Ritanshu Singh    schedule 27.03.2020
comment
это очень хороший ответ! - person MaZoli; 27.03.2020