Криво работает margin для внутреннего div'ва?

Develax · November 13, 2012

Код полностью:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>

<body style="margin:0px; padding:0px;">
	<div style="background: blue; height: 50px;">
	    <div style="background: green; height: 30px; margin-top: 30px;">
	    </div>
	</div>
</body>

</html>

Для удобства обозначу первый div - 'A', вложенный div - 'B'.

У 'B' задан margin-top: 30px, и я ожидаю, что он получит отступ в 30 пикселей от верхней границы 'A'. Слой 'A' при этом останется прижат к верхней границе страницы.

Но в итоге получается другая картина - отступ получает слой 'A', а слой 'B' остается прижат к верхней границе слоя 'A'.

Я неверно понимаю принцип работы свойства margin?

Если добавить к слою 'A' хотя-бы минимальный padding (1px), все начинает работать согласно моим ожиданиям. В чем тут может быть дело?

P.S.

Сейчас обнаружил, что в IE9 в режиме совместимости все работает согласно моим ожиданиям.

Если добавить еще один вложенный div с margin-top, опять тот же эффект, причем эти margin'ы складываются.

<body style="margin:0px; padding:0px;">
	<div style="background: blue; height: 150px;">
	    <div style="background: green; height: 80px; margin-top: 30px;">
		    <div style="background: red; height: 40px; margin-top: 60px;">
		    </div>
	    </div>
	</div>
</body>

И опять же все лечится padding:1px. Я ничего не понимаю

Edited November 13, 2012 by Develax

psywalker · November 13, 2012

Код полностью:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>

<body style="margin:0px; padding:0px;">
	<div style="background: blue; height: 50px;">
	    <div style="background: green; height: 30px; margin-top: 30px;">
	    </div>
	</div>
</body>

</html>
Для удобства обозначу первый div - 'A', вложенный div - 'B'.
У 'B' задан margin-top: 30px, и я ожидаю, что он получит отступ в 30 пикселей от верхней границы 'A'. Слой 'A' при этом останется прижат к верхней границе страницы.
Но в итоге получается другая картина - отступ получает слой 'A', а слой 'B' остается прижат к верхней границе слоя 'A'.
Я неверно понимаю принцип работы свойства margin?
Если добавить к слою 'A' хотя-бы минимальный padding (1px), все начинает работать согласно моим ожиданиям. В чем тут может быть дело?
P.S.
Сейчас обнаружил, что в IE9 в режиме совместимости все работает согласно моим ожиданиям.
Если добавить еще один вложенный div с margin-top, опять тот же эффект, причем эти margin'ы складываются.
<body style="margin:0px; padding:0px;">
	<div style="background: blue; height: 150px;">
	    <div style="background: green; height: 80px; margin-top: 30px;">
		    <div style="background: red; height: 40px; margin-top: 60px;">
		    </div>
	    </div>
	</div>
</body>
И опять же все лечится padding:1px. Я ничего не понимаю :(/>

Всё правильно. Это известная штука, которая называется Схлопывание margin'ов. Вот тебе полезная статья по теме. Изучай.

Develax · November 13, 2012

Спасибо, теперь понятно. Только, если это имеет смысл для <p>, то для <div> как-то больше смущает. + еще пяток правил, которые нужно постоянно держать в голове. Ну не мне судить.

Edited November 13, 2012 by Develax

Sign In

Криво работает margin для внутреннего div'ва?

Question

Develax

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Develax

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information