CSS: граничная вершина, когда родитель не имеет никакой границы
Оба метода имеют свои проблемы.
, Если подкласс изменяет идентификационные данные, то необходимо сравнить их фактические классы. Иначе Вы нарушаете симметричное свойство. Например, различные типы Person с нельзя считать эквивалентной, даже если у них есть то же имя.
Однако некоторые подклассы не изменяют идентификационные данные, и они должны использовать instanceof. Например, если у нас есть набор неизменных Shape, объекты, затем Rectangle с длиной и шириной 1 должны быть равны единице Square.
На практике, я думаю, что бывший случай, более вероятно, будет верен. Обычно, разделение на подклассы является фундаментальной частью Ваших идентификационных данных, и бывший похожий точно на Вашего родителя кроме Вас может сделать того, которому мало вещи не заставляет Вас равняться.
7 ответов
Вы можете добавить overflow: auto в .body , чтобы предотвратить коллапс полей. См. http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Использовать отступ вместо поля :
.body .container {
...
padding-top: 30px;
}
Вы испытываете коллапс маржи. Поле не определяет область вокруг элемента, а скорее минимальное расстояние между элементами.
Поскольку зеленый контейнер не имеет границ или отступов, нет ничего, что могло бы содержать поле оранжевого элемента. Поле используется между верхним элементом и оранжевым элементом так же, как если бы у зеленого контейнера было поле.
Используйте заполнение в зеленом контейнере вместо поля на оранжевом элементе.
Вы читали этот документ: Блочная модель - Свертывание полей
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%;
}
Вы можете добавить padding-top: 30 в зеленом поле, использовать относительное позиционирование в оранжевом поле с top: 30px или перемещать оранжевое поле и используйте то же значение margin-top: 30px .
Не знаете, как это звучит хакерски, но как насчет добавления прозрачной границы?
Не уверен, что это сработает в вашем случае, но я только что решил это со следующими свойствами CSS
#element {
padding-top: 1px;
margin-top: -1px;
}
#element было сдвинуто вниз, потому что его первый дочерний элемент имел margin-top: 30px . Теперь с этим CSS он работает так, как ожидалось :) Не уверен, что он будет работать для всех случаев, YMMV.