Моделирование рамки: внутренний отступ CSS

Внутренний отступ элемента находится между рамкой и областью содержимого. Самый простой способ управления этой областью - это свойство padding.

Свойство padding CSS определяет空白ную область между рамкой элемента и его содержимым.

Атрибут padding CSS

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

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

h1 {padding: 10px;}

Вы также можете установить внутренние отступы сверху, справа, снизу и слева в порядке, указанном выше, и для каждой стороны можно использовать различные единицы или процентные значения:

h1 {padding: 10px 0.25em 2ex 20%;}

Свойства внутреннего отступа одной стороны

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

Вы, наверное, уже подумали, что下面的 правило обеспечивает такой же эффект, как и сокращенное правило выше:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Процентные значения внутреннего отступа

Как уже упоминалось, можно установить процентные значения для свойств внутреннего отступа. Процентные значения рассчитываются относительно ширины родительского элемента, как и для внешних отступов. Таким образом, если ширина родительского элемента изменяется, они также изменяются.

Ниже приведено правило, которое устанавливает внутренний отступ абзаца в 10% от ширины родительского элемента:

p {padding: 10%;}

Например: если родительским элементом абзаца является элемент div, то его внутренний отступ должен быть вычислен на основе ширины div.

<div style="width: 200px;">
<p>Этот абзац содержится в DIV с шириной 200 пикселей.</p>
</div>

Внимание:Внутренние отступы сверху и снизу должны быть равны внутренним отступам слева и справа; то есть процентные значения для внутреннего отступа сверху и снизу устанавливаются относительно ширины родительского элемента, а не высоты.

Пример CSS внутреннего отступа:

Все свойства внутреннего отступа в одном заявлении
Этот пример демонстрирует, как использовать сокращенные свойства для установки всех свойств внутреннего отступа в одном заявлении, может быть от одного до четырех значений.
Установить нижний внутренний отступ 1
Этот пример демонстрирует, как использовать значения в сантиметрах для установки нижнего внутреннего отступа ячейки.
Установить нижний внутренний отступ 2
Этот пример демонстрирует, как использовать процентные значения для установки нижнего внутреннего отступа ячейки.
Установить левый внутренний отступ 1
Этот пример демонстрирует, как использовать значения в сантиметрах для установки левого внутреннего отступа ячейки.
Установить левый внутренний отступ 2
Этот пример демонстрирует, как использовать процентные значения для установки левого внутреннего отступа ячейки.
Установить правый внутренний отступ 1
Этот пример демонстрирует, как использовать сантиметровые значения для установки правого внутреннего отступа ячейки.
Установить правый внутренний отступ 2
Этот пример демонстрирует, как использовать процентные значения для установки правого внутреннего отступа ячейки.
Установить верхний внутренний отступ 1
Этот пример демонстрирует, как использовать сантиметровые значения для установки верхнего внутреннего отступа ячейки.
Установить верхний внутренний отступ 2
Этот пример демонстрирует, как использовать процентные значения для установки верхнего внутреннего отступа ячейки.

Свойства внутреннего отступа CSS

Свойство Описание
padding Краткая форма. Действует как установка всех свойств внутреннего отступа элемента в одном заявлении.
padding-bottom Установить нижний внутренний отступ элемента.
padding-left Установить левый внутренний отступ элемента.
padding-right Установить правый внутренний отступ элемента.
padding-top Установить верхний внутренний отступ элемента.