Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
| Число значений |
Результат |
| 1 |
Поля будут установлены одновременно от каждого края элемента. |
| 2 |
Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого. |
| 3 |
Первое значение задает поле от верхнего края, второе — одновременно
от левого и правого края, а третье — от нижнего края. |
| 4 |
Поочередно устанавливается поля от верхнего, правого, нижнего и левого
края. |
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых
для CSS единицах. Значение inherit указывает, что оно наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>padding</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid black; /* Параметры рамки */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства border-right-color
Объектная модель
[window.]document.getElementById("elementID").style.padding
|
