Отступы CSS
Свойства padding в CSS создают пространство вокруг содержимого элемента, внутри его рамки.
CSS позволяет задавать отступы для каждой стороны элемента (сверху, справа, снизу, слева), а также есть сокращённое свойство для задания их всех сразу.
Пример
У этого элемента отступ 70px со всех сторон.
Prompt
HTML-страница, показывающая элемент с большим отступом (padding) внутри его рамки.
Во внутреннем блоке
<style> задайте <div> отступ 70px, рамку и цвет фона, чтобы пространство внутри рамки было хорошо заметно. Поместите внутрь div немного текста.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This element has a padding of 70px.</div>
</body>
</html>
Padding — отдельные стороны
В CSS есть свойство для каждой стороны: padding-top, padding-right, padding-bottom и padding-left.
Все свойства padding могут принимать следующие значения:
- длину — отступ в
px,pt,cmи так далее. - процент — отступ как процент от ширины содержащего элемента.
inherit— отступ берётся из родительского элемента.
Примечание: Отрицательные значения не допускаются.
Пример
Каждая сторона div получает свой отступ.
Prompt
HTML-страница, задающая разный отступ (padding) на каждой стороне элемента.
Во внутреннем блоке
<style> задайте <div> padding-top 50px, padding-right 30px, padding-bottom 50px и padding-left 80px. Добавьте рамку и фон, чтобы отступ был виден. Поместите внутрь текст.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This div has different padding on all four sides.</div>
</body>
</html>
Padding — сокращённое свойство
Чтобы сделать код короче, можно задать все отступы одним свойством padding, которое заменяет padding-top, padding-right, padding-bottom и padding-left.
Количество значений меняет то, к каким сторонам они применяются:
- Четыре значения (
25px 50px 75px 100px): сверху, справа, снизу, слева. - Три значения (
25px 50px 75px): сверху, затем справа и слева, затем снизу. - Два значения (
25px 50px): сверху и снизу, затем справа и слева. - Одно значение (
25px): все четыре стороны.
Четыре значения
Задаёт отступы сверху, справа, снизу и слева по порядку.
Prompt
HTML-страница, использующая сокращённую запись padding с четырьмя значениями.
Во внутреннем блоке
<style> задайте <div> padding: 25px 50px 75px 100px (сверху, справа, снизу, слева), плюс рамку и фон, чтобы отступ был виден. Поместите внутрь текст.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px 75px 100px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Four values: 25px top, 50px right, 75px bottom, 100px left.</div>
</body>
</html>
Три значения
Задаёт отступ сверху, затем справа и слева, затем снизу.
Prompt
HTML-страница, использующая сокращённую запись padding с тремя значениями.
Во внутреннем блоке
<style> задайте <div> padding: 25px 50px 75px (сверху, справа и слева, снизу), плюс рамку и фон, чтобы отступ был виден. Поместите внутрь текст.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px 75px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Three values: 25px top, 50px right and left, 75px bottom.</div>
</body>
</html>
Два значения
Задаёт отступ сверху и снизу, затем справа и слева.
Prompt
HTML-страница, использующая сокращённую запись padding с двумя значениями.
Во внутреннем блоке
<style> задайте <div> padding: 25px 50px (сверху и снизу, затем справа и слева), плюс рамку и фон, чтобы отступ был виден. Поместите внутрь текст.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Two values: 25px top and bottom, 50px right and left.</div>
</body>
</html>
Одно значение
Задаёт одинаковый отступ со всех четырёх сторон.
Prompt
HTML-страница, использующая сокращённую запись padding с одним значением.
Во внутреннем блоке
<style> задайте <div> padding: 25px (все четыре стороны), плюс рамку и фон, чтобы отступ был виден. Поместите внутрь текст.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>One value: 25px on all four sides.</div>
</body>
</html>