Странное поведение отступов...

ZooY · March 8, 2008

<html>
<head>

<style type="text/css">
body { margin: 0; padding: 0; background: #e5e4e4; }
#body { background: #fff; }
#head { height: 137px; }
#logo { margin-top: 34px; }
</style>

</head>
<body>

<div id="body">
<div id="head">
<div id="logo"><a href="#"><img src="logo.gif" width="165" height="69" border="0"></a></div>
</div>
</div>

</body>
</html>

Хочу отодвинуть логотип (id="logo") от верхнего края шапки (id="head"). Для этого задаю стиль #logo { margin-top: 34px; }. В IE все нормально, а вот в FF, вместо того, чтобы отоднинуться логотипу от края шапки, отодвигается сама шапка.

Проблема решается, если вместо margin-top указать padding-top. Но хотелось бы знать почему эта проблема вообще возникает, может кто знает?

Иван Шумов · March 8, 2008

проблема возникает по причине IE-FF-Opera ...это вечная проблема

ZooY · March 8, 2008

проблема возникает по причине IE-FF-Opera ...это вечная проблема

Любой браузер для верстальщика проблема - это понятно...

Я спрашивал может кто знает чем руководствуется механизм FF, создавая описанный эффект. Ведь любую проблему в отображении браузеров можно объяснить, вот мне и интересно, чем объяснить эту.

Scrum · March 8, 2008

странно но если добавить бордер то вроде как все хорошо/

#body { background: #fff; border: 1px solid red;}

почему ?, честно пока не знаю.

yopopt · March 8, 2008

Неужели никто не знает про схлопывание отступов ("margin collapsing")?

Почитайте: http://www.w3.org/TR/CSS21/box.html#collapsing-margins или поищите.

ZooY · March 10, 2008

А причем тут схлопывание отступов? Схопывание отступов проявляется у двух блоков, следующих друг за другом, а перед шапкой никаких блоков, с которыми могло бы произойти схлопывание, нет.

homm · March 10, 2008

Неужели никто не знает про схлопывание отступов ("margin collapsing")?
Почитайте: http://www.w3.org/TR/CSS21/box.html#collapsing-margins или поищите.

Чесно, никогда не знал, но всегда об этом догадвывался

Sign In

Странное поведение отступов...

Question

ZooY

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Иван Шумов

Link to comment

Share on other sites

ZooY

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

ZooY

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information