Заполнение используется для создания пространства вокруг содержимого элемента внутри любых определенных границ.
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>
</body>
</html>
Свойства CSS padding
используются для создания пространства вокруг содержимое элемента внутри любых определенных границ.
С помощью CSS вы имеете полный контроль над отступами. Есть недвижимость для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).
CSS имеет свойства для указания заполнения для каждого сторона элемента:
padding-top
padding-right
padding-bottom
padding-left
Все свойства заполнения могут иметь следующие значения:
длина - указывает отступ в пикселях, точках, см и т. д.
% — указывает отступ в % от ширины содержащего элемента.
inherit — указывает, что заполнение должно быть унаследовано от родительского элемента.
Примечание. Отрицательные значения не допускаются.
Установите разные отступы для всех четырех сторон элемента <div>:
div { padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Чтобы сократить код, можно указать все свойства заполнения в одно свойство.
Свойство padding
является сокращенным свойством для следующего человека свойства заполнения:
padding-top
padding-right
padding-bottom
padding-left
Итак, вот как это работает:
Если свойство padding
имеет четыре значения:
padding: 25px 50px 75px 100px;
верхнее отступы составляет 25 пикселей.
правое отступ составляет 50 пикселей
нижнее отступы составляет 75 пикселей.
отступ слева — 100 пикселей
Используйте сокращенное свойство заполнения с четырьмя значениями:
div { padding: 25px 50px 75px 100px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
Если свойство padding
имеет три значения:
padding: 25px 50px 75px;
верхнее отступы — 25 пикселей.
правые и левые отступы имеют размер 50 пикселей.
нижнее отступы составляет 75 пикселей.
Используйте сокращенное свойство заполнения с тремя значениями:
div { padding: 25px 50px 75px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 3 values</h2>
<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>
</body>
</html>
Если свойство padding
имеет два значения:
padding: 25px 50px;
верхние и нижние отступы составляют 25 пикселей.
правые и левые отступы имеют размер 50 пикселей.
Используйте сокращенное свойство заполнения с двумя значениями:
div { padding: 25px 50px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>
</body>
</html>
Если свойство padding
имеет одно значение:
padding: 25px;
все четыре отступа имеют размер 25 пикселей.
Используйте сокращенное свойство заполнения с одним значением:
div { padding: 25px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
Свойство CSS width
определяет ширину области содержимого элемента. область содержимого — это часть внутри отступа, границы и поля элемента. (коробочная модель).
Таким образом, если элемент имеет указанную ширину, добавленное к этому элементу дополнение будет быть добавлено к общей ширине элемента. Зачастую это нежелательный результат.
Здесь элементу <div> присвоена ширина 300 пикселей. Однако фактическая ширина элемента <div> будет составлять 350 пикселей (300 пикселей + 25 пикселей левого отступа + 25 пикселей правого отступа):
div {
width: 300px;
padding: 25px;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>
Чтобы сохранить ширину 300 пикселей независимо от количества отступов, вы можете использовать свойство box-sizing
. Это заставляет элемент сохранять свою фактическую ширину; если Если вы увеличите отступы, доступное пространство для содержимого уменьшится.
Используйте свойство box-sizing, чтобы сохранить ширину 300 пикселей независимо от количество заполнения:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>
Установите левое дополнение
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 50%;
}
</style>
</head>
<body>
<h1>The padding-left Property</h1>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>
В этом примере показано, как установить левое дополнение элемента <p>.
Установите правильное отступы
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-right: 2cm;
}
p.padding2 {
padding-right: 50%;
}
</style>
</head>
<body>
<h1>The padding-right Property</h1>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
В этом примере показано, как установить правильное заполнение элемента <p>.
Установить верхнее отступы
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}
p.padding2 {
padding-top: 50%;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>
</body>
</html>
В этом примере показано, как установить верхнее дополнение элемента <p>.
Установка нижнего отступа
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom:2cm;
}
p.padding2 {
padding-bottom:50%;
}
</style>
</head>
<body>
<h1>The padding-bottom Property</h1>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>
</body>
</html>
В этом примере показано, как установить нижнее дополнение элемента <p>.
Сокращенное свойство для установки всех свойств заполнения в одном объявлении.
Устанавливает нижнее отступ элемента
Устанавливает отступы слева от элемента
Устанавливает правильное отступы элемента
Устанавливает верхнее отступ элемента