Параметр 'padding'
Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| padding-top | Устанавливает поля. Значения задаются в % (определяет поле в % от ширины ближайшего элемента) и длиной (определяет фиксированное поле) |
| padding-right | |
| padding-bottom | |
| padding-left |
Примеры:
p {padding: 2px}
для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px}
верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины ближайшего элемента.
p {padding: 2px 7px 5%}
верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px}
верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее поле будет 7px, левое поле будет 5px.
Параметр 'padding-bottom'
Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное нижнее поле |
| % | Определяет нижнее поле в % от высоты ближайшего элемента |
Пример:
li { padding-bottom: 5% }
Параметр 'padding-left'
Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное левое поле |
| % | Определяет левое поле в % от высоты ближайшего элемента |
Пример:
li { padding-left: 2px }
li { padding-left: 5% }
Параметр 'padding-right'
Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное правое поле |
| % | Определяет правое поле в % от высоты ближайшего элемента |
Пример:
li { padding-right: 2px }
Параметр 'padding-top'
Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное верхнее поле |
| % | Определяет верхнее поле в % от высоты ближайшего элемента |
Пример:
li { padding-top: 2px }
Параметры полей в CSS
Определяют пространство между границей элемента и содержимым элемента, для которого не предусмотрены отрицательные значения. Все поля (верхнее, правое, нижнее и левое) можно изменять независимо друг от друга. Существует также параметр padding, который позволяет определять нескольких полей в одном объявлении.
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
| padding | Параметр для задания всех полей в одном объявлении | padding-top | 4 | 1 | 4 | 1 |
| padding-right | ||||||
| padding-bottom | ||||||
| padding-left | ||||||
| padding-bottom | Задает нижнее поле элемента | length | 4 | 1 | 4 | 1 |
| % | ||||||
| padding-left | Задает левое поле элемента | length | 4 | 1 | 4 | 1 |
| % | ||||||
| padding-right | Задает правое поле элемента | length | 4 | 1 | 4 | 1 |
| % | ||||||
| padding-top | Задает верхнее поле элемента | length | 4 | 1 | 4 | 1 |
| % |
Этот пример показывает, как задать
- Этот пример показывает, как задать левое поле элементов списка. <html> <head> <style type="text/css"> li {padding-left: 0.5cm} </style> </head>
<body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>
</html> Этот пример показывает, как задать правое поле элементов списка. <html> <head> <style type="text/css"> li {padding-right: 3cm} </style> </head>
<body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>
</html> Этот пример показывает, как задать верхнее поле элементов списка. <html> <head> <style type="text/css"> li {padding-top: 1cm} </style> </head>
<body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>
</html> Этот пример показывает, как задать нижнее поле элементов списка. <html> <head> <style type="text/css"> li {padding-bottom: 2.5cm} </style> </head>
<body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>
</html> Пример показывает, как с помощью параметра padding задать все поля в одном объявлении. Допускается определение от одного до четырех значений. <html> <head> <style type="text/css"> li.first {padding: 2.5cm} li.second {padding: 1cm 2cm} </style> </head>
<body> <ol> <li class="first">элемент списка с одинаковыми полями со всех сторон</li> <li>элемент списка</li> <li class="second">элемент списка, который имеет верхнее и нижнее поле, равное 1 см, а левое и правое поля — равные 2 см</li> </ol> </body>
</html>
