Учебники

CSS — отступы

Сентябрь 21, 2018

Свойство padding позволяет указать, сколько места должно появляться между содержимым элемента и его границей.

Значение этого атрибута должно быть длиной, процентом или словом « унаследовать» . Если значение унаследовано , оно будет иметь тот же отступ, что и его родительский элемент. Если используется процентное содержание, процентное содержание содержит поле.

Следующие свойства CSS могут использоваться для управления списками. Вы также можете установить разные значения для отступов на каждой стороне поля, используя следующие свойства:

  • Нижний отступ определяет нижний отступ элемента.

  • Padding-top определяет верхний отступ элемента.

  • Padding-left указывает левый отступ элемента.

  • Padding-right указывает правое заполнение элемента.

  • Заполнение служит сокращением для предыдущих свойств.

Нижний отступ определяет нижний отступ элемента.

Padding-top определяет верхний отступ элемента.

Padding-left указывает левый отступ элемента.

Padding-right указывает правое заполнение элемента.

Заполнение служит сокращением для предыдущих свойств.

Теперь мы увидим, как использовать эти свойства на примерах.

Свойство padding-bottom

Свойство padding-bottom устанавливает нижнее заполнение (пробел) элемента. Это может принимать значение в терминах длины%.

Вот пример —

Live Demo

<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 устанавливает верхний отступ (пространство) элемента. Это может принимать значение в терминах длины%.

Вот пример —

Live Demo 

<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-left

Свойство padding-left устанавливает левый отступ (пробел) элемента. Это может принимать значение в терминах длины%.

Вот пример —

Live Demo 

<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 устанавливает правый отступ (пространство) элемента. Это может принимать значение в терминах длины%.

Вот пример —

Live Demo 

<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 устанавливает отступ слева (справа), сверху и снизу (пробел) элемента. Это может принимать значение в терминах длины%.

Вот пример —

Live Demo 

<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>

Это даст следующий результат —

45
Share: