Все блоки на изображении (a,b,c,d) div. Прописываю margin-top:20px; для блока "a", ожидая, что отступ будет произведен от верха блока "b" (тем самым будет по-середине блока "b"), но почему-то отступ идет от блока "d", почему? З.Ы. красным показан сам отступ, пустое место.
3 ответа
Это называется "схлопыванием" полей. Вертикальное поле дочернего элемента схлопывается (складывается в данном случае) с верхним блоком родительского элемента и они оба двигаются вниз. Вы совершенно правы, необходимо для родительского элемента задать overflow: hidden
- это заставляет браузер отменять схлопывание и двигает вниз именно дочерний элемент.
<!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/ Смотрите внимательней может слои вложены не так?
-
дело в том, что присвоение рамки для родительского элемента имеет такой же эффект, что и приведённый мной метод. поэтому и не видите проблем.– LeD4eGCommented 7 мар. 2012 в 18:29