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

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

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

Автор: skyboy 21.8.2009, 11:26

Код


<!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

Автор: skyboy 21.8.2009, 12:53

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

Автор: blah 21.8.2009, 13:25

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

Код


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

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

Автор: skyboy 21.8.2009, 14:50

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

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

Автор: Violator 21.8.2009, 15:13

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

Автор: skyboy 21.8.2009, 16:07

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