W3docs
ru
Войти

CSS отступы

Use CSS padding property (top, bottom, left, right) to set the padding for each side of an HTML element. See examples.

Свойство 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>
Попробуйте сами »

Результат

CSS Padding Property

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