Проблема с понимание работы margin

LanCasterUser · December 3, 2011

Здравствуйте.Не могу понять поведения боксовой модели.Ниже код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Тест</title>
<style type="text/css">
#box1 {
	margin:0 auto;
	width:800px;
	height:100px;
	background-color:#F00;
}
#box2 {
	margin-top:10px;
	width:100px;
	background-color:#0F0;
	height:100px;
}
</style>
</head>

<body>
<div id="box1">
    <div id="box2">
    </div>
</div>
</body>
</html>

Т.е. у меня есть родительский див с фиксировано высотой и шириной и дочерний.Не понимаю - почему при объявлении свойства margin-top к дочернему диву сдвигается и родительский див (т.е. margin отсчитывается от BODY?).Как я понял из теории - box2 должен отсчитывать от box1 и никакого сдвига box1 происходить не должно вообще.

Но на практике получается наоборот - Можете объяснить почему..

Заранее спасибо

Edited December 3, 2011 by LanCasterUser

MaferoK · December 3, 2011

Примените ко 2му блоку position или float

http://jsfiddle.net/8JC7W/7/

http://jsfiddle.net/8JC7W/8/

например

LanCasterUser · December 4, 2011

Ну как выйти из ситуации я знаю..Можно применить padding.И тогда отступ будет визуально идти от родителя (box2).Просто я хочу понять поведение самих боксов.Почему я из дочернего узла задаю поведение родителя.как-то нелогично..

Edited December 4, 2011 by LanCasterUser

rash · December 4, 2011

Это — «схлопывение», взаимное поглощение отступов, margin collapsing.

Если кратко — то http://htmlbook.ru/css/margin в разделе «примчение», если более обстоятельно — ищите margin collapsing или схлопывание отступов.

LanCasterUser · December 4, 2011

В разве схлопывание работает не от сестринских элементов?Как я понял - пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
#box1 {
	margin:0 auto;
	width:800px;
	height:400px;
	background-color:#F00;
}
#box2 {
	width:800px;
	height:100px;
	margin-bottom:50px;
	background-color:#00F;

}
#box3 {
	width:800px;
	height:100px;
	margin-top:80px;
	background-color:#0F0;
}
</style>
</head>

<body>
<div id="box1">
	<div id="box2"></div>
    <div id="box3"></div>
</div>
</body>
</html>

Т.е. растояние от box2 до box3 будет 80px - я думал это и есть margin collapse?И действует от в пределах сестринских элементов..Причем здесь родитель?(в данном случае box1)

P.S.Извините за ламерские вопросы - но честно не могу понять.Спасибо

P.P.S.Может я вопрос неправильно задаю - попробую иначе

Из первого примера - почему при задании margin зеленому боксу сдвинулся и красный бокс (он ведь родитель и вроде поле зеленого бокса должно идти от границ родителя(красного бокса) а не BODY)

Edited December 4, 2011 by LanCasterUser

SelenIT · December 4, 2011

Для родительских тоже. Вот здесь, по-моему, наиболее удачное объяснение.

Не схлопываются только для корневого эл-та (html) и для элементов, создающих новый контекст форматирования (float-ы, инлайн-блоки, таблицы и их ячейки,а также элементы с overflow:hidden/auto/scroll). И если у внешнего элемента сверху есть ненулевой padding или border.

LanCasterUser · December 5, 2011

Теперь понял..Спасибо...За ссылку вообще низкий тебе поклон))) - столько нужной информации и без соплей я еще нигде не видел

Sign In

Проблема с понимание работы margin

Question

LanCasterUser

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

MaferoK

Link to comment

Share on other sites

LanCasterUser

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

LanCasterUser

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

LanCasterUser

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information