Компактная запись размеров границ, полей и отступов

2008-02-04 / Рубрика: CSS

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

Приведу несколько примеров

1. Одинаковый размер поля со всех четырёх сторон

div.sample { 
 margin-top: 10px; 
 margin-left: 10px; 
 margin-bottom: 10px; 
 margin-right: 10px; 
}

Или более компактная запись

div.sample {
 margin: 10px; 
}

2. Один размер отступов сверху и снизу и другой размер справа и слева

div.sample {
 padding-top: 10px;
 padding-right: 5px; 
 padding-bottom: 10px;
 padding-left: 5px; 
}

Или более компатная запись

div.sample {
 padding: 10px 5px; 
}

3. Разные размеры для всех границ

div.sample { 
 border-top-width: 10px; 
 border-right-width: 15px; 
 border-bottom-width: 5px; 
 border-left-width: 20px; 
}

Или более компактная запись

div.sample { 
 border-width: 10px 15px 5px 20px; 
}

Данный приём компактной записи ещё называют тиражированием значений. Нужно запомнить порядок следования значений: top, right, bottom, left — они перечисляются по ходу часовой стрелки.