Проблема отступов.

boompaw · February 21, 2011

Добрый вечер.

Есть код:

<html>
<title>aaa</title>
<head>
<style type="text/css">

html body {
margin: 0;
width: 100%;
background-color: #000;
}

#main {
margin: auto;
width: 80%;
background-color: #fff;
}

#head {
height: 200px;
margin: 2%;
background-color: #888;
}

</style>
</head>
<body>


<div id="main">

 <div id="head">

 </div>

</div>


</body>
</html>

Отступы у head от main делаются только справа и слева, а сверху и снизу не делаются.

В связи с чем это происходит?

Помогите пожалуйста разобраться.

arez · February 21, 2011

#main {
margin: auto;
width: 80%;
padding: 2%;
background-color: #fff;
}
#head {
height: 200px;
background-color: #888;
}

и DOCTYPE поставьте

runet · February 21, 2011

Добрый вечер.
Есть код:
<html>
<title>aaa</title>
<head>
<style type="text/css">

html body {
margin: 0;
width: 100%;
background-color: #000;
}

#main {
margin: auto;
width: 80%;
background-color: #fff;
}

#head {
height: 200px;
margin: 2%;
background-color: #888;
}

</style>
</head>
<body>


<div id="main">

 <div id="head">

 </div>

</div>


</body>
</html>
Отступы у head от main делаются только справа и слева, а сверху и снизу не делаются.
В связи с чем это происходит?
Помогите пожалуйста разобраться.

Про doctype уже сказали, а так можно добавить в

#main { overflow: hidden;  }

. То что у тебя происходит называется схлопыванием внешних отступов. Здесь более подробно margin

boompaw · February 21, 2011

Спасибо вам большое ребята.

Только учусь, поэтому такие вопросы глупые.

Про doctype уже сказали, а так можно добавить в
#main { overflow: hidden;  }
. То что у тебя происходит называется схлопыванием внешних отступов. Здесь более подробно margin

У меня вопрос созрел:

Каким образом overflow влияет в данном случае на решение проблемы?

runet · February 22, 2011

Просто

overflow: hidden;

отсекает отступы друг у друга. Кстати это не ошибка браузеров, а описываемое поведении боксовой модели. Чтобы блок не вываливался из контейнера, можно родителю прописать

overflow: отличным от visible

или сделать абсолютное позиционирование, float.

Edited February 22, 2011 by runet

SelenIT · February 22, 2011

Каким образом overflow влияет в данном случае на решение проблемы?

Тем, что создает отдельный контекст форматирования.

psywalker · February 22, 2011

Тем, что создает отдельный контекст форматирования.

Дружище, а если не сложно, расскажи плиз в краце, что там написано? Как объяснить происходящее?

SelenIT · February 22, 2011

В том разделе, 9.4.1, написано примерно такое:

Float-ы, абсолютно позиционированные эл-ты, контейнеры блоков (такие как строчные блоки, ячейки и заголовки таблиц), не являющиеся блоками, и блоки с любым 'overflow', кроме 'visible' (кроме случаев, когда это свойство передается области просмотра браузера) образуют новые контексты форматирования блоков.
В контексте форматирования блоков, боксы выкладываются один за другим, по вертикали, начиная от верха блока-контейнера. Вертикальное расстояние между двумя соседними блоками определяется свойством 'margin'. Вертикальные 'margin'-ы между соседними блочными боксами в контексте форматирования блоков схлопываются.

а в разделе 8.3.1 Collapsing margins, третьим пунктом списка —

Вертикальные margin-ы элементов, образующих новые контексты форматирования (таких как float-ы и элементы с любым 'overflow', кроме 'visible') не схлопываются с их потомками, размещаемыми в потоке (т.е. как обычно).

Получается, что в таких блоках margin-ы схлопываются только у потомков друг с другом, но не у родителя с потомками...

psywalker · February 22, 2011

Ага, спасибо за разъяснения, как обычно, поучил дурака

Sign In

Проблема отступов.

Question

boompaw

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

arez

Link to comment

Share on other sites

runet

Link to comment

Share on other sites

boompaw

Link to comment

Share on other sites

runet

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information