CSS Padding: Как использовать и настраивать отступы в CSS

CSS (Cascading Style Sheets) является языком стилей, который позволяет описывать оформление веб-страниц. Одно из свойств CSS - это padding (заполнение).

Padding - это внутренний отступ элемента. Он задает расстояние между содержимым элемента и его границей.

Значение padding могут быть задано с помощью абсолютных единиц измерения (например, пиксели) или относительных процентных значений (%).

Например, чтобы установить padding для элемента div от всех его границ на 10 пикселей, можно использовать следующий CSS код:

 css
div {
  padding: 10px;
}

Также можно установить значение padding для каждой границы отдельно, используя следующий синтаксис:

 css
padding-top: 10px;  /* задает значение для верхней границы */
padding-right: 5%;  /* задает значение для правой границы */
padding-bottom: 20px; /* задает значение для нижней границы */
padding-left: 2em; /* задает значение для левой границы */

Когда у элемента задан padding, он влияет на размер и позиционирование элемента на странице. Например, если у элемента с заданным padding имеются границы или фон, то размеры самого элемента будут больше, чем его содержимое.

Ниже пример кода, который демонстрирует влияние padding на элемент:

 css
div {
  background-color: #ddd; /* можно установить фоновый цвет для элемента */
  border: 1px solid black; /* можно нарисовать границы */
  padding: 20px; /* задаем одно и то же значение padding для всех границ */
  width: 200px; /* задаем ширину элемента */
  height: 100px; /* задаем высоту элемента */ 
}

 html

  
Текст внутри элемента div

Результат будет выглядеть примерно так:

+-----------------------------------------------+
|    < 20px >  |         содержимое            | < 20px > |
| границы div |                                 | границы div |
|       |                                           |        |
|      20px                                       |        |
|       |                                           |        |
+-----------------------------------------------+

В данном примере видно, что содержимое элемента внутри границ располагается с отступом в 20 пикселей от его границ.