Свойство padding позволяет указать, сколько пространства должно отображаться между содержимым элемента и его границей -
Значение этого атрибута должно быть либо длиной, либо процентом, либо словом inherit. Если значение наследуется, оно будет иметь такое же дополнение, как и его родительский элемент. Если используется процент, процентная доля содержит поле ввода.
Следующие свойства CSS могут использоваться для управления списками. Вы также можете установить разные значения для заполнения на каждой стороне поля, используя следующие свойства:
- padding-bottom определяет нижний отступ элемента.
- padding-top определяет верхний отступ элемента.
- padding-left определяет левый отступ элемента.
- padding-right определяет правый отступ элемента.
- padding служит сокращением для предыдущих свойств.
Теперь мы увидим, как использовать эти свойства с примерами.
Свойство padding-bottom
Свойство padding-bottom устанавливает нижнее дополнение (пробел) элемента. Это может принимать значение с точки зрения длины.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
< /p>
< p style="padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
< /p>
< /body>
< /html>
Это приведет к следующему результату:
Свойство padding-top
Свойство padding-top устанавливает верхнее заполнение (пробел) элемента. Это может принимать значение с точки зрения длины.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
< /p>
< p style="padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
< /p>
< /body>
< /html>
Это приведет к следующему результату -
Свойство padding-lef
Свойство padding-left устанавливает левое заполнение (пробел) элемента. Это может принимать значение с точки зрения длины.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
< /p>
< p style="padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
< /p>
< /body>
< /html>
Это приведет к следующему результату -
Свойство padding-right
Свойство padding-right устанавливает правильное заполнение (пробел) элемента. Это может принимать значение с точки зрения длины.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
< /p>
< p style="padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
< /p>
< /body>
< /html>
Это приведет к следующему результату -
Свойство Padding
Свойство padding устанавливает левое, правое, верхнее и нижнее заполнение (пробел) элемента. Это может принимать значение с точки зрения длины.
Вот пример -
< html>
< head>
< /head>
< body>
< p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
< /p>
< p style="padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
< /p>
< p style="padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
< /p>
< p style="padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
< /p>
< /body>
< /html>
Это приведет к следующему результату -