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


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

спасибо

7   51   2009-09-08 19:40:16

7 ответов:

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

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

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

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

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

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

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

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

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

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

Вы читаете этот документ: Box model-Margin collapsing

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

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