VPF::Странное поведение margin - Форум программистов

psworld

Дата 11.7.2008, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 65
Регистрация: 16.12.2006
Где: Московская област ь

Репутация: нет
Всего: 0

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »