Вторник, 25 Июня 2013 08:34

Margin-top в процентах

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

Рассмотрим расчет верхнего внешнего отступа margin, заданного в процентах.

 

<div style="padding: 30px; background: blue; "><div style="margin-top: 50%; background: green;">red</div></div>

 

 

red

 

 

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

 

При рендеринге страницы, браузер высчитывает размеры элементов. У блочного элемента ширина зависит от заданной стилями и ширины родительского элемента. А вот высота блочного элемента зависит от его содержимого. Если бы margin-top высчитывался от высоты родителя, то и высота родителя зависела бы от margin-top. Потому подобное поведение является логичным.

 

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

 

 

Это блок можно растянуть

 

 

 

 

 

Additional Info

You have no rights to post comments

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