Среда, 05 Декабря 2012 10:11

Схлопывание margin

Written by 
Оцени эту запись
(1 Голос)

Давайте рассмотрим очень важное в CSS свойство margin, которое практически всегда используется в разметке страницы и всегда используется в верстке контента сайта. А также рассмотрим интересную особенность этого свойства -- схлопывание или collapse. 

 

Свойство margin задает внешний отступ элемента. Но это свойство не всегда работает так, как хотелось бы.

Например, в блочном элементе есть блочный элемент с отступом сверху:

 

<style>

 

.margin_container_3 {
            background: blueviolet;
}
.margin_container_3 p {
            background: blue;
            margin-top: 30px;
            color: white;
}

</style>

 

<div class="margin_container_3">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
 
 
 
Судя по стилям, мы должны были получить сине-фиолетовый блок, в внутри него синий, отступающий сверху на 30px. Но сине-фиолетового блока не видно, внутренний блок не отступил. 

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

 
 
Еще один пример:
 
 
<style>
.margin_container_2 {
            margin: 20px 0;
            border: 1px solid green;
            height: 10px;
            background: lightgreen;
}
</style>
<div class="margin_container_2"></div>
<div class="margin_container_2"></div>
 
У каждого блока отступы всерху и снизу равны 20px, значит между ними должно быть 40px. Но отступ между нимим все таки 20.
 
 
 
 
Данные примеры и показывают свойство схлопыапние margin'ов.
 
На самом деле, это не баг. Так задуманно. И чтобы показать полезность данное реализации отступов, приведу пример реализации верстки контента. Пусть у нас будет список статей или записей, каждая из которых находится в элементе <p>, а у <p> заданы отступы всерху и снизу 20px:
 
<style>
.margin_container {
            border: 1px solid blue;
}
.margin_container p {
            margin: 20px 0;
            border: 1px solid violet;
}
</style>
<div class="margin_container">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
 
 
 

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

 
 
Благодаря схлопыванию margin'ов мы получаем равные отступы абзацев контента сверху, снизу и между ними. 
 
Но если вам такой вариант не подходит, с этим можно бороться, задав абзацам <p> отступ только снизу или только сверху. А недостающий отступ можно сделать, применив внутренний отступ padding для родительского элемента.
 
 
 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов