Как сделать внутренний отступ в css

Внутренний отступ между элементами в CSS?

Допустим, есть два горизонтальных блока div:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css3 css html или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Внешние и внутренние отступы в CSS

В CSS есть два вида отступов — внешние и внутренние.Внутренние отступы — это расстояние от края контента до рамки блока. А внешние отступы — это расстояние от рамки блока до соседнего блока или до края страницы. Если рамки нет, то расстояние определяется от предполагаемой рамки. Для создания внешних отступов в CSS используется свойство margin , а для создания внутренних — свойство padding . Значением этих свойств является расстояние в единицах, доступных в CSS.

Для примера создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока.

Обратите внимание — второй блок, которому не установлены отступы, не касается краёв страницы, а находится от них на определённом расстоянии. Это происходит потому, что у тега <body> есть внутренние отступы. Их можно отменить, то есть, сделать равными нулю, как и у любого элемента.

ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей.

Отступы можно установить с каждой стороны по-отдельности. Для установки внешних отступов используются свойства margin-left , margin-right , margin-top , margin-bottom , а для внутренних отступов padding-left , padding-right , padding-top , padding-bottom .

Добавим на страницу блок и установим ему внутренние отступы сверху и слева:

Попробуйте установить блоку различные внутренние и внешние отступы, посмотрите, как они работают.

Если нужно указать разные отступы со всех четырёх сторон, то это можно сделать более коротким способом. Для этого свойствам margin и padding указываются четыре значения через пробел:

Свойство CSS padding

Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

Примечание 1
Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

  • Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
  • Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
  • Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

Примечание 2
В отличии от свойства CSS margin, отрицательные значения у padding не допустимы.

Также у padding есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

  • padding-left — отступ от левой границы элемента;
  • padding-right — отступ от правой границы элемента;
  • padding-top — отступ от верхней границы элемента;
  • padding-bottom — отступ от левой границы элемента;

Примеры с разными отступами внутри элемента

Пример 1. Отступ текста внутри тега <div>

Вот как это выглядит на странице:

Пример 2. Отступ объекта внутри объекта

Для обращения к padding из JavaScript нужно писать следующую конструкцию:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *