Просмотров: 1 432

Свойство CSS margin проблема схлопывания отступов по вертикали.

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

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

<div style="background:#c9c;">Блок div 1</div>
<div style="background:#ccc;">Блок div 2</div>

Как вы думаете, какое расстояние между ними будет, если нижнему из этих блоков мы зададим отступ margin-top 50px, а верхнему из них margin-bottom:30px?

Первое, что приходит на ум, расстояние между ними должно стать 50 + 30 = 80px. Правильно?

Но, в CSS все не так просто и некоторые вещи здесь не совсем очевидны.

На самом деле расстояние между двумя блоками будет равно большему из двух отступов. В данном случае 50 пикселям.

Чтобы это было более наглядно видно я присвою свойство height для элементов соответственно их отступам.

<div style="background:#c9c; margin-bottom:30px; height:30px;">Блок div 1</div>
<div style="background:#ccc; margin-top:50px; height:50px;">Блок div 2</div>

С этой проблемой приходится довольно часто встречаться при верстке веб-страниц. Нужно учитывать это и задавать соответствующее значение свойства margin по вертикали для элементов.

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

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».