VPF::margin-top потомка отодвигает предка

skyboy

Дата 21.8.2009, 11:26 (ссылка)

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

Загрузка ...

неОпытный

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>тест margin</title>
</head>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
div.outer {
 background-color: #F00;
}
div.inner {
 background-color: #FF0;
 height: 50px;
 margin-top: 20px;
 width: 20px;
}
</style>
<body>
 <div class="outer">
   <div class="inner">
   </div>
 </div>
</body>
</html>

не могу понять, почему .inner отодвигает .outer? всегда считал, что margin считается от края родительского блока(точнее - offsetParent, в смысле, видимого родителя). соответственно моей логике, .inner должен был уйти вниз сам, а не пододвигать родителя.
ясен пень, создание собственного контекста форматирования путем указания overflow: hidden для .outer помогает, но я хочу понять логику.

Добавлено через 2 минуты и 55 секунд
наблюдается это в FF3.5, O10, IE6. уже из этого могу сделать вывод, что проблема не в баге браузера, а в моем понимании работы margin smile

Присоединённый файл ( Кол-во скачиваний: 6 )

strange_margin.png 2,27 Kb

skyboy

Дата 21.8.2009, 12:53 (ссылка)

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

Загрузка ...

неОпытный

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

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

а ведь с margin-left все работает так, как я представляю: то есть потомок отодвигается от края самостоятельно.

Присоединённый файл ( Кол-во скачиваний: 4 )

strange_margin_2.png 2,22 Kb

blah

Дата 21.8.2009, 13:25 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

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

Еще одно проявление отсутствия hasLayout(да, он может отсутствовать не только в ие)

Код


div.outer {
 background-color: #F00;
 overflow:hidden;
 width:100%;
}

Добавлено @ 13:29
Правда в других браузерах это не hasLayout, но схема какая же.

Это сообщение отредактировал(а) blah - 21.8.2009, 13:32

skyboy

Дата 21.8.2009, 14:50 (ссылка)

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

Загрузка ...

неОпытный

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

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

с overflow: hidden не интересно smile

может, подскажет кто, где можно почитать в спецификации CSS про такое поведение? если, конечно, это часть спецификации CSS(или это к HTML как-то относится?)
и ещё интересно - почему в таком случае, горизонтальные margin-left и margin-right такого эффекта не дают?

Violator

Дата 21.8.2009, 15:13 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

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

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

skyboy,
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
http://www.complexspiral.com/publications/...apsing-margins/

skyboy

Дата 21.8.2009, 16:07 (ссылка)

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

Загрузка ...

неОпытный

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

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

спасибо за ссылки, Violator.
особенно за вторую.

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