Свойства заполнения CSS определяют пространство между границей элемента и содержимым элемента.
Заполнение
Заполнение очищает область вокруг содержания (внутри границы) элемента. Заполнение зависит от цвета фона элемента.
Верхнее, правое, нижнее и левое поля могут быть изменены независимо друг от друга с использованием отдельных свойств. Сокращенное свойство заполнения может также использоваться, чтобы изменить все заполнения сразу.
Возможные значения
| Значение | Описание |
|---|---|
| length | Определяет фиксированное заполнение (в пикселях, pt, em, и т.д.) |
| % | Определяет заполнение в % от содержащего элемента |
Заполнение - отдельные стороны
В CSS, можно задать различные заполнения для разных сторон:
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { background-color:yellow; }
p.padding {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>Этот параграф без указанного заполнения.</p>
<p class="padding">Этот параграф с указанным заполнением.</p>
</body>
</html>
Заполнение - Краткая форма записи
Для сокращения кода, можно указать все свойства заполнения в одном свойстве. Это называется краткая форма записи.
Краткая форма записи для всех свойств заполнения - "padding":
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { background-color:yellow; }
p.padding { padding:25px 50px; }
</style>
</head>
<body>
<p>Этот параграф без указанного заполнения.</p>
<p class="padding">Этот параграф с указанным заполнением.</p>
</body>
</html>
Свойство padding может иметь от одного до четырех значений.
- padding:25px 50px 75px 100px;
- верхнее заполнение - 25px
- правое заполнение - 50px
- нижнее заполнение - 75px
- левое заполнение - 100px
- padding:25px 50px 75px;
- верхнее заполнение - 25px
- правое и левое заполнение - 50px
- нижнее заполнение - 75px
- padding:25px 50px;
- верхнее и нижнее заполнение - 25px
- правое и левое заполнение - 50px
- padding:25px;
- все четыре заполнения - 25px
Больше примеров
Пример 3
Этот пример демонстрирует сокращенное свойство для установки всех свойств заполнения в одной декларации, может иметь от одного до четырех значений.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.ex1 { padding:20px; }
p.ex2 { padding:10px 30px; }
</style>
</head>
<body>
<p class="ex1">Этот текст имеет равное заполнение с каждой стороны. Заполнение на каждой стороне равно 20px.</p>
<p class="ex2">Этот текст имеет верхнее и нижне заполнение в 10px, и левое и правое заполнение в 30px.</p>
</body>
</html>
Пример 4
Этот пример показывает, как устанавливается заполнение слева элемента P.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.padding { padding-left:2cm; }
p.padding2 { padding-left:50%; }
</style>
</head>
<body>
<p>Этот текст не имеет заполнения слева.</p>
<p class="padding">Этот текст имеет заполнение слева 2 с"м.</p>
<p class="padding2">Этот текст имеет заполнение слева 50%.</p>
</body>
</html>
Пример 5
Этот пример показывает, как устанавливается заполнение справа элемента P.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.padding { padding-right:2cm; }
p.padding2 { padding-right:50%; }
</style>
</head>
<body>
<p>Этот текст не имеет заполнения справа. Этот текст не имеет заполнения справа. Этот текст не имеет заполнения справа.</p>
<p class="padding">Этот текст имеет заполнение справа 2 с"м. Этот текст имеет заполнение справа 2 с"м. Этот текст имеет заполнение справа 2 с"м.</p>
<p class="padding2">Этот текст имеет заполнение справа 50%. Этот текст имеет заполнение справа 50%. Этот текст имеет заполнение справа 50%.</p>
</body>
</html>
Пример 6
Этот пример показывает, как устанавливается заполнение сверху элемента P.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.padding { padding-top:40px; }
p.padding2 { padding-top:50%; }
</style>
</head>
<body>
<p>Этот текст не имеет заполнения сверху. </p>
<p class="padding">Этот текст имеет заполнение сверху 40px.</p>
<p class="padding2">Этот текст имеет заполнение сверху 50%.</p>
</body>
</html>
Пример 7
Этот пример показывает, как устанавливается заполнение снизу элемента P.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.padding { padding-bottom:40px; }
p.padding2 { padding-bottom:50%; }
</style>
</head>
<body>
<p>Этот текст не имеет заполнения снизу.</p>
<p class="padding">Этот текст имеет заполнение снизу 40px.</p>
<p class="padding2">Этот текст имеет заполнение снизу 50%.</p>
</body>
</html>
Все свойства заполнения CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| padding | Сокращеная форма свойства для настройки свойств заполнения в одной декларации | padding-top padding-right padding-bottom padding-left |
1 |
| padding-bottom | Устанавливает нижнее заполнение элемента | length % |
1 |
| padding-left | Устанавливает левое заполнение элемента | length % |
1 |
| padding-right | Устанавливает правое заполнение элемента | length % |
1 |
| padding-top | Устанавливает верхнее заполнение элемента | length % |
1 |
Была ли эта информация полезной?
