Компьютерапия

Отступы в CSS

Категория: Основы CSS
Просмотров: 1181

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

Это приведет к следующему результату -





Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok