CSS:Margin-top, когда у родителя нет границы

Question

Как вы можете видеть в эта картинка, у меня есть апельсин 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>

Спасибо

Answer 1

Вы могли бы добавить overflow:auto к .body чтобы предотвратить схлопывание полей.Видеть http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

Answer 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%;
}

Answer 7

Не знаю, насколько хакерски это звучит, но как насчет добавления прозрачной границы?