Пятница, 22 Июня 2012 09:34

Верстка сайта. Урок 9. Высота элемента

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

 

Высота блочного элемента задается при помощи css-свойства height и ее величина может быть задана в пикселях или процентах.
 
 
 
<div style="height: 50px; width: 50px;"></div>
 
 
 
Но, по факту, на высоту элемента при отображении в браузере еще будут влиять внутренний отступ и граница.
 
 
 
Если у блока такие стили:
 
 
 
<div style="height: 50px; width: 50px; padding-top: 10px;"></div>
 
 
 
то его высота на, самом деле, не 50px, а 60px.
 
 
 
Аналогично, высоту прибавляет рамка блока:
 
 
 
<div style="height: 50px; width: 50px; padding-top: 10px; border: 1px solid blue;"></div>
 
 
 
В этом случае получим уже 62px, так как граница 1px сверху и 1px снизу.
 
 
 
Значит, если у блока такие стили:
 
 
 
<div style="height: 50px; width: 50px; padding: 10px 20px; border: 2px solid blue;"></div>
 
 
 
то высота нашего блока при отображении в окне браузера будет 74 px:
 
 
 
74 px = 50px(height) + 10px(padding-top) + 10px(padding-bottom) + 2px(border-top) + 2px(border-bottom)
 
 
 
Хочу еще заметить, что высоту при помощи свойства height можно задавать только блочному элементу(блочные и строчные элементы пункт 5, 6). Строчные элементы это свойство не воспринимают. Изменить высоту строчного элемента можно при помощи padding и line-height.
 
 
 
 
<span style="line-height: 50px;">word</span>
 
<span style="padding: 20px 0; font-size: 10px; line-height: 10px;">word</span>
 
 

Похожие записи

You have no rights to post comments

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