Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Странное поведение margin

Автор: psworld 11.7.2008, 16:49

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<style>
div {
    height: 100px;
    padding: 0; margin: 0;
    background-color: silver;
}

h1 {
    margin-top: 1em;
}
</style>

<div>
    <h1>Страница</h1>
</div>

Код упрощен намеренно. Браузер — Опера 9.5.

Вопрос: почему margin-top отодвигает верхнюю границу div'а?
Решение нашел (добавить ненулевой padding div'у), а причину — нет.

Автор: webster 11.7.2008, 18:04

В спецификации CSS2 вводится понятие "Сокращенные поля" (или "Сжатие полей"):
Два или больше соседних вертикальных полей блоков формируются в сокращение нормальным образом. Результирующая ширина поля является максимальной из ширины соседних полей.
У вас два блока (блочных элемента) DIV и H1 у первого margin: 0; а у второго margin-top: 1em; поэтому и выбирается наибольшее значение.
http://www.bast-tr.narod.ru/css/css.html - "Сокращенные поля".