margin-top смещает родительский блок вниз

stalker_2000 · September 17, 2008

Привет всем. Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style>
* { padding: 0; margin: 0; }
#wrapper {
  margin: 0 auto;
  width: 900px; }
#header {
  width: 900px;
  background: #ABBEBE; }
#content {
/*border: 1px solid;*/
  height: 300px;
  background: #ABFFFF;
  width: 900px; }
#footer {
  width: 900px;
  background: #ABBEBE; }
.stick {
  width: 100px;
  height: 100px;
  margin: 100px 0px 0px 10px; }
</style>
</head>

<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="content"><div class="stick">content</div></div>
  <div id="footer">footer</div>
</div>
</body>

</html>

Блок content съезжает вниз на величину верхнего отступа блока stick, вместо того, что бы сместить сам блок stick относительно content. Если раскомментировать в стиле content-а строку /*border: 1px solid;*/ (при чем тут это?! ), всё становится на свои места... Подскажите, где ошибка...

Edited September 18, 2008 by stalker_2000

Victor Ananiev · September 17, 2008

не знаю, я просто юзал позишн релатив и свойства лефт с райт. вчера с такой фигней столкнулся)) влом было думать в чем проблема))

yopopt · September 18, 2008

Это банальное схлопывание отступов (”margin collapsing”). Поищите и почитайте про него. Лечится установкой границы(как у Вас), добавлением padding или вырыванием блока из общего потока (position или float).

stalker_2000 · September 19, 2008

Это банальное схлопывание отступов (”margin collapsing”). Поищите и почитайте про него. Лечится установкой границы(как у Вас), добавлением padding или вырыванием блока из общего потока (position или float).

Спасибо, теперь всё прояснилось

Походу ещё возник вопрос. В IE6 и 7 вышеприведенный код работает без схлопывания, в то время как в ФФ2 и 3, а так же в опере оно присутствует. Это глюк ИЕ?

Edited September 19, 2008 by stalker_2000

Sign In

margin-top смещает родительский блок вниз

Question

stalker_2000

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

stalker_2000

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information