Просмотров: 2 362

Свойство 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 по горизонтали, то здесь все работает нормально, отступы, как и предполагается по смыслу, складываются.

Возможно, вам будут интересна моя услуга верстки посадочных страниц. Тогда, нажмите на ссылку ниже, чтобы узнать об этом подробнее.

Услуга верстки посадочных страниц.