Свойство padding – вставляется между краем содержимого и краем заполнения блока, обеспечивая интервал между содержимым и границей. Свойство Свойство padding – указывает толщину области заполнения поля.
Свойство padding - это сокращенное свойство для установки значений : padding-top , padding-right , padding-bottom и padding-left в одном объявлении.
Если есть только одно значение компонента, оно применяется ко всем сторонам.
Если есть два значения, верхнее и нижнее отступы устанавливаются на первое значение, а правое и левое отступы устанавливаются на второе.
Если есть три значения, верхнее значение устанавливается на первое значение, левое и правое - на второе, а нижнее - на третье.
Если есть три значения, верхнее значение устанавливается на первое значение, левое и правое - на второе, а нижнее - на третье.
body { padding: 2em } /* все отступы установлены на 2em */
body { padding: 1em 2em } /* сверху и снизу = 1em, справа и слева = 2em */
body { padding: 1em 2em 3em } /* top = 1em, right = 2em, bottom = 3em, left = 2em */Последнее правило приведенного выше примера эквивалентно приведенному ниже примеру:
body {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em; /* скопировано с противоположной стороны (справа) */
}Пример:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Внутренние отступы: Свойство padding</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
.left {padding-left: 5px; }
.right {padding-right: 25%; }
.top {padding-top: 15mm; }
.bottom {padding-bottom: 50px; }
p {font-size: 14pt;}
</style>
</head>
<body>
<h1>Внешние отступы: Свойство padding</h1>
<table>
<tbody>
<tr>
<td class="left">padding-left: 0</td>
<td class="right">padding-right: 25%</td>
</tr>
<tr>
<td class="top">padding-top: 15mm</td>
<td class="bottom">padding-bottom: 50px</td>
</tr>
</tbody>
</table>
</body>
</html>Внешние отступы: Свойство padding
