div и дочерний элемент с margin > 0

wholegroup · October 14, 2009

Здравствуйте,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<title>Модальное окно</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
		html, body
		{
			height : 100%;
			margin : 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<div style="background-color: green;">asd</div>
	<div style="margin: 0; padding: 0; background-color: blue;">
			<h1 style="margin: 45px; padding: 0px;">Заголовок</h1>
	</div>
</body>
</html>

Результат:

Вопрос:

Почему так странно влияет свойство margin у H1 на родительский контейнер DIV ?

Я не понимаю, почему по вертикали срабатывает отступ для цвета фона, а по горизонтали отступ на фон DIV'а не влияет? Может есть какое-то свойство, которое исключит отступ фона у DIV'а ?

p.s. убрать margin у H1 и поставить padding не предлагать +) хочу разобраться как оно работает. По моей логике это ошибка. Такое поведение наблюдается в IE, Opera, Firefox, Chrome.

Спасибо.

psywalker · October 14, 2009

Абсолютно правильное поведение отступа, поставь родителю заголовка хотябы один паддинг или бордер, тогда всё будет ок

s0rr0w · October 14, 2009

Здравствуйте,
Вопрос:
Почему так странно влияет свойство margin у H1 на родительский контейнер DIV ?

Потому что margin collapsing

Sign In

div и дочерний элемент с margin > 0

Question

wholegroup

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information