#html #css
#HTML #css
Вопрос:
Я заметил странное поведение тега div (на мой взгляд, и с моими знаниями HTML и CSS). Я создаю сайт с пользовательской сеточной системой, и если я не применяю плавающий атрибут (левый или правый), div, в котором я применяю класс grid, не заметит свойства margin.
Код:
.grid-100 {width: 100%;}
.grid-60 { width: 65%; float: left;}
.grid-30 { width: 33%; float: left;}
.grid-100, .grid-60, .grid-30 { margin-top: 30px;}
Если я не установлю float:left; значение .grid-100, div с этим классом не будет применять margin-top к 30px.
Кто-нибудь может дать мне объяснение?
Комментарии:
1. Должно быть что-то еще в вашей проблеме jsfiddle.net/esvLa разве вы не видите верхнюю границу поля?
2. Можете ли вы предоставить полный пример кода, который иллюстрирует проблему? Я предполагаю, что поля сворачиваются, но без полной картины это только предположение.
Ответ №1:
См. раздел Свертывание полей.
Нормальное поведение:
Родительский и первый / последний дочерний элемент
Если нет границы, отступа, встроенного содержимого или разрешения, чтобы отделить верхнюю часть поля блока от верхней части поля его первого дочернего блока, или нет границы, отступа, встроенного содержимого, высоты, минимальной высоты или максимальной высоты, чтобы отделить нижнюю часть поля блока,блок с нижней границей своего последнего дочернего элемента, затем эти поля сворачиваются. Свернутое поле оказывается за пределами родительского элемента.
Когда вы перемещаете их:
Поля плавающих и абсолютно позиционированных элементов никогда не сворачиваются.