Отступы и поля

Обновлено: 30.05.2022

Отступы и поля

Изменение отступов внутри или вокруг элементов.

  • margin

    margin

    Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-bottom

    margin-bottom

    Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-left

    margin-left

    Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-right

    margin-right

    Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-top

    margin-top

    Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • padding

    padding

    Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-block

    padding-block

    Универсальное свойство, которое одновременно задаёт начальный и конечный внутренние отступы элемента по блочной оси. Направление оси зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и padding-block устанавливает отступы сверху и снизу. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и padding-block устанавливает отступы слева и справа.

  • padding-block-end

    padding-block-end

    Определяет конечный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соответствовать свойству padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-block-end в сочетании с другими свойствами.

  • padding-block-start

    padding-block-start

    Определяет начальный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-start может соответствовать свойству padding-top, padding-right, padding-left. В табл. 1 показано положение padding-block-start в сочетании с другими свойствами.

  • padding-bottom

    padding-bottom

    Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-inline

    padding-inline

    Универсальное свойство, которое одновременно задаёт начальный и конечный внутренние отступы элемента по строчной оси. Направление оси зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет горизонтальной и padding-inline устанавливает отступы слева и справа. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет вертикальной и padding-inline устанавливает отступы сверху и снизу.

  • padding-inline-end

    padding-inline-end

    Определяет начальный внутренний отступ элемента по строчной оси. В зависимости от значения свойства writing-mode и direction, свойство padding-inline-end может соответствовать свойству padding-top, padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-inline-end в сочетании с другими свойствами.

  • padding-inline-start

    padding-inline-start

    Определяет начальный внутренний отступ элемента по строчной оси. В зависимости от значения свойства writing-mode и direction, свойство padding-inline-start может соответствовать свойству padding-top, padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-inline-start в сочетании с другими свойствами.

  • padding-left

    padding-left

    Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-right

    padding-right

    Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-top

    padding-top

    Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).