CSS: верхний край, когда родитель не получил границу

Как вы можете видеть в этом рисунке, у меня оранжевый div внутри зеленого div без верхней границы. Оранжевый div имеет верхний край 30px, но он также нажимает зеленый div вниз. Конечно, добавление верхней границы поможет решить проблему, но мне нужно, чтобы зеленый div был верхним без полей. Что я могу сделать?

.body {
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	width: 120px;
	height: 112px;
	background-color: lightgreen;
}

.body .container {
	background-color: orange;
	height: 50px;
	width: 50%;
	margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
	<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

Ответы

Ответ 2

То, что вы испытываете, - это крах. Поля не определяют область вокруг элемента, а скорее минимальное расстояние между элементами.

Поскольку у зеленого контейнера нет границы или отступов, нет ничего, чтобы содержать край оранжевого элемента. Маржа используется между верхним элементом и оранжевым элементом так же, как если бы у зеленого контейнера был запас.

Используйте дополнение в зеленом контейнере вместо поля на оранжевом элементе.

Ответ 3

Используйте padding вместо margin:

.body .container {
    ...
    padding-top: 30px;
}

Ответ 4

Не уверен, что это будет работать в вашем случае, но я просто решил это со следующими свойствами CSS

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element был нажат, потому что у его первого дочернего элемента был margin-top: 30px. С помощью этого CSS он теперь работает как ожидалось:) Не уверен, что он будет работать для каждого случая, YMMV.

Ответ 5

Вы можете добавить padding-top: 30 в зеленую рамку, использовать относительное позиционирование на оранжевом поле с помощью top: 30px или поместить оранжевую рамку и использовать тот же margin-top: 30px.

Ответ 6

Вы читаете этот документ: Модель коробки - рухнувшая маржа

CSS

.body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}

Ответ 7

Не знаю, как это звучит, но как добавить прозрачную рамку?