Блог старого компьютера

Блог старого компьютера


Главная html & css Схлопывание или странный отступ (margin-top)

Схлопывание или странный отступ (margin-top)

29.05.2012 09:19 Администратор html & css
Печать PDF

Эта статья как и предыдущая направлена на начинающих верстальщиков. Порой я думаю зачем это писать когда информацию по этой проблеме можно найти на других сайтах, но все равно пишу. И так если вы верстальщик начинающий или опытный то всем вам знакома ситуация когда дочернему элеметну задаешь margin-top, а отступ в свою очередь на первый взгляд не отображается. Вы начинаете увеличивать значение отступа и тут видите что отступ есть, но он проявляется у родительского элемента. Вот сообственно об этой ситуации и пойдет речь, в простонародье называют схлопывание.

 И так обрисуем ситуацию более подробно, для этого набросаем небольшой код состоящий к примеру из блока и заголовка:

<style>
.block{
width: 500px;
background: blue;
}

h1 {
margin-top:10px;
margin-left:10px;
background: orange;
}
</style>

<div class="block">
<h1>Заголовок</h1>
</div>

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

А мы хотим видеть вот такой результат:

 Сообственно как с этим бороться? Для решения этой проблемы есть около 6 способов, но я думаю не стоит вам забивать свои головы и достаточно знать всего один, который на мой взгляд самый простой и эффективный.

Решение заключается в следующем: задать родительскому элементу свойство overflow с любым значением кроме visible. Я задаю всегда overflow:hidden;

И так код теперь у нас приобрел вот такой вид:

<style>
.block{
overflow:hidden;
width: 500px;
background: blue;
}

h1 {
margin-top:10px;
margin-left:10px;
background: orange;
}
</style>

<div class="block">
<h1>Заголовок</h1>
</div>

 Вот собственно и все.

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


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

Поиск

Голосование

Что Вы думаете на счет битрикса?