1

Все блоки на изображении (a,b,c,d) div. Прописываю margin-top:20px; для блока "a", ожидая, что отступ будет произведен от верха блока "b" (тем самым будет по-середине блока "b"), но почему-то отступ идет от блока "d", почему? З.Ы. красным показан сам отступ, пустое место.

alt text

1
  • проблема вроде как решена добавлением overflow:hidden; для блока b, но незнаю, правильно ли так делать?
    – dikardRus
    Commented 7 мар. 2012 в 16:48

3 ответа 3

3

Это называется "схлопыванием" полей. Вертикальное поле дочернего элемента схлопывается (складывается в данном случае) с верхним блоком родительского элемента и они оба двигаются вниз. Вы совершенно правы, необходимо для родительского элемента задать overflow: hidden - это заставляет браузер отменять схлопывание и двигает вниз именно дочерний элемент.

1

Схлопывание границ. Используйте стиль clear:both

0
<!doctype html>
<html>  
<head>   
<meta http-equiv="content-type" content="text/html; charset=UTF-8">   
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='d'>D</div>
<div id='c'>
          <div id='b'>
              <div id='a'>A</div>       
          B</div>

C</div>
</body>
</html>

И CSS Не вижу ваших проблем

#a {
      margin-top: 20px;
      width: 800px;
      height: 200px;
      border: solid;
  }
 #b {
      margin-top: 20px;
      width: 900px;
      height: 300px;
       border: solid;
  }
#c {
      width: 1000px;
      height: 700px;
       border: solid;
  }
#d { width: 1000px;
     height: 50px;
      border: solid;
  }

Все работает - http://daywer.ru/test/ Смотрите внимательней может слои вложены не так?

1
  • дело в том, что присвоение рамки для родительского элемента имеет такой же эффект, что и приведённый мной метод. поэтому и не видите проблем.
    – LeD4eG
    Commented 7 мар. 2012 в 18:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.