CSS-отступы


Оглавление

    Показать оглавление


Заполнение используется для создания пространства вокруг содержимого элемента внутри любых определенных границ.


This element has a padding of 70px.

Попробуйте сами →

<!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-отступы

Свойства 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>.



Все свойства заполнения CSS

padding

Сокращенное свойство для установки всех свойств заполнения в одном объявлении.

padding-bottom

Устанавливает нижнее отступ элемента

padding-left

Устанавливает отступы слева от элемента

padding-right

Устанавливает правильное отступы элемента

padding-top

Устанавливает верхнее отступ элемента