'float' и 'clear' ведут себя странно, когда 'body {padding: 0;}'.Зачем? - PullRequest
Новая
       20

'float' и 'clear' ведут себя странно, когда 'body {padding: 0;}'.Зачем?

0 голосов
/ 15 марта 2012

Прежде всего, HTML-разметка, 

<p>Bananas For BreakFast</p>

<h1>What the what!?</h1>

... и css, 

body, p, h1, h2, h3, h4{
  margin: 0; padding: 0;
}

body{
  padding: 30px;
}


/*remove the comment to trigger the effect

body{
  padding: 0;
}

*/


p{
  float: left;
  background-color: red; /*just to aid visualization*/
}

h1{
  clear: both;     
  margin-top: 200px;
  background-color: grey; /*just to aid visualization*/
}

Вы можете увидеть это в действии на странице tinkerbin ниже.

http://tinkerbin.com/FJcLuxBr

Итак, в чем моя проблема?

Простой: при заполнении элемента body применяется верхний край очищенного элемента. Когда 'padding: 0;' 'margin-top' на том же очищенном элементе перестает работать.

Почему?

Очищенные элементы не участвуют в коллапсах полей с элементами над ним, поэтому это не может быть коллапс вершины полей с полями тела. И даже если бы это было так, то поле должно быть применено к элементу body, толкая все это вниз - и это не так.

Ответы [ 2 ]

0 голосов
/ 15 марта 2012

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

Почему бы и нет? См. http://www.w3.org/TR/CSS2/box.html#collapsing-margins. Я не могу найти там ничего, что оправдывает очищенные элементы. Обратите внимание, что элемент не должен быть отделен от своего родителя другим очищенным элементом или какими-либо границами / отступами.

И даже если бы это было так, то к элементу body должно быть применено поле, толкающее все это вниз - и это не так.

Нет. Опять же, смотрите спецификации:

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

0 голосов
/ 15 марта 2012

добавление clear div между ними заставляет его работать ..

http://tinkerbin.com/Ayc4qk3R

...