CSS отступы
Свойство CSS padding используется для создания пространства вокруг содержимого элемента. CSS предоставляет разные свойства, с помощью которых можно задать padding для каждой стороны элемента (правой, левой, верхней и нижней).
Отдельные стороны
С помощью следующих свойств можно задать padding для каждой стороны элемента:
Как можно догадаться, для верхней стороны мы используем padding-top, для нижней — padding-bottom, для левой — padding-left, а для правой — padding-right.
Все свойства padding могут принимать следующие значения:
- length — используется для задания padding в px, pt, cm и т. д.,
- % — задаёт padding в % от ширины содержащего элемента,
- inherit — указывает, что padding должен быть унаследован от родительского элемента.
Имейте в виду, что свойство CSS padding не может принимать отрицательные значения. Его значение по умолчанию для всех свойств padding — 0.
Пример отдельных свойств padding:
Пример использования отдельных свойств padding:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
</div>
</body>
</html>Padding как сокращённое свойство
Свойство CSS padding является сокращённым свойством для перечисленных ниже отдельных свойств padding:
В случаях, когда свойство padding имеет только 1 значение, например padding: 35px, все четыре отступа будут равны 35px.
Пример сокращённого свойства padding с одним значением:
Пример сокращённого свойства padding с одним значением:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: green;
padding: 35px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Свойство padding может иметь 2 значения, например padding: 20px 40px, где верхний и нижний отступы равны 20px, а правый и левый — 40px.
Пример CSS padding с 2 числами
p {
padding: 20px 40px;
}Это то же самое, что и код выше.
Пример CSS padding с 2 числами, длинный вариант, код
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Пример сокращённого свойства padding с двумя значениями:
Пример кода CSS padding
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Результат
Свойство padding может иметь 3 значения, например padding: 20px 15px 35px;, где верхний отступ равен 20px, правый и левый отступы — 15px, а нижний — 35px.
Пример CSS padding с 3 числами, код
p {
padding: 20px 15px 35px;
}Это то же самое, что и код выше.
Пример CSS padding с 3 числами, длинный вариант, код
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Пример сокращённого свойства padding с тремя значениями:
Пример сокращённого свойства padding с тремя значениями:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
padding: 20px 15px 35px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>И, наконец, свойство padding может иметь четыре значения, например padding: 25px 50px 75px 100px;, где верхний отступ равен 25px, правый — 50px, нижний — 75px, а левый — 100px.
Пример CSS с тем же padding
p {
padding: 25px 50px 75px 100px;
}Пример сокращённого свойства padding с четырьмя значениями:
Пример сокращённого свойства padding с двумя значениями:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #95e5f7;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Practice
What describes the 'padding' property in CSS correctly?