Помогите разобраться с полем!

west456 · June 7, 2013

Всем доброго времени суток. Только начал свой путь верстальщика. Сейчас работаю над одним из учебных шаблонов данного форума.

Мой style.css


html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
#header {
height: 401px;
background: url(images/header_bg.png) repeat-x;
}
#header .contact {
margin-top: 45px;
}

Мой index.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Раира</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div class="contact">
<p>Круглосуточная концультация по телефону</p>
<p>(495) 123-45-67</p>
</div>
</div>
</body>
</html>

Вопрос: Почему добавляя margin-top: 45px; вложенному блоку class="contact", поле добавляется и к блоку id="header" и опускает его на 45px а не только блок class="contact" ? Решил данную проблему путем добавления свойства position: relative; блоку id="header" и свойства position: absolute; блоку class="contact". Но хотелось бы узнать почему так происходит. Спасибо!

Vulner · June 7, 2013

Еще можно решить это добавлением padding-top: 45px в #header, а margin у .contact соответственно убрать. А тот эффект что наблюдается у вас называется, если я не ошибаюсь, схлопыванием.

west456 · June 7, 2013

Еще можно решить это добавлением padding-top: 45px в #header, а margin у .contact соответственно убрать. А тот эффект что наблюдается у вас называется, если я не ошибаюсь, схлопыванием.

Спасибо, это как раз мой случай а именно пункт "Вложенные элементы" , еще нашел описания данного свойства в книге Д. Макфарланд - Большая книга CSS 2012, в 7 главе "Поля, отступы, границы", подраздел "Конфликты полей", кому интересно.

June 7, 2013

еще нашел описания данного свойства в книге Д. Макфарланд - Большая книга CSS 2012, в 7 главе "Поля, отступы, границы", подраздел "Конфликты полей", кому интересно.

Какой ты молодец!

Sign In

Помогите разобраться с полем!

Question

west456

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Vulner

Link to comment

Share on other sites

west456

Link to comment

Share on other sites

121990

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information