Как сделать отступ в css

Обновлено: 04.07.2024

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

Благодаря CSS у вас есть полный контроль над отступом. Есть свойства для установки отступов для каждой стороны элемента (вверху, справа, внизу и слева).

Padding - Отдельные стороны

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

padding-top
padding-right
padding-bottom
padding-left

Все свойства padding могут иметь следующие значения:

length - указывает отступ в пикселях, pt, см и т.д.
% - указывает отступ в % от ширины содержащего элемента
inherit - указывает, что отступ должен быть унаследован от родительского элемента

Примечание: Отрицательные значения не допускаются!

Пример

Установите разные отступы для всех четырех сторон элемента

Padding - Сокращенное свойство

Чтобы сократить код, можно указать все свойства отступа в одном свойстве.

Свойство padding - это сокращенное свойство для следующих индивидуальных свойств отступа:

padding-top
padding-right
padding-bottom
padding-left

Т.о., вот как это работает:

Если свойство padding имеет четыре значения:

padding: 25px 50px 75px 100px;

верхний отступ 25px
правый отступ 50px
нижний отступ 75px
левый отступ 100px

Пример

Используйте сокращенное свойство padding с четырьмя значениями:

Если свойство padding имеет три значения:

padding: 25px 50px 75px;

верхний отступ 25px
правый и левый отступы 50px
нижний отступ 75px

Пример

Используйте сокращенное свойство padding с тремя значениями:

Если свойство padding имеет два значения:

padding: 25px 50px;

верхний и нижний отступы 25px
правый и левый отступы 50px

Пример

Используйте сокращенное свойство padding с двумя значениями:

Если свойство padding имеет одно значение:

padding: 25px;

все четыре отступа 25px

Пример

Используйте сокращенное свойство padding с одним значением:

Padding и Width

CSS свойство width определяет ширину области содержимого элемента. Область содержимого - это часть внутри отступа, границы и поля элемента (блочная модель).

Итак, если элемент имеет указанную ширину, добавленный к этому элементу отступ будет добавлен к общей ширине элемента. Часто это нежелательный результат.

Пример

Чтобы сохранить ширину 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing . Это заставляет элемент сохранять свою ширину; если вы увеличите отступ, доступное пространство содержимого уменьшится.

Пример

Используйте свойство box-sizing, чтобы ширина оставалась равной 300 пикселей, независимо от количества отступов:

Больше примеров

Установите левый отступ
Этот пример демонстрирует, как установить левый отступ элемента

Установите правый отступ
Этот пример демонстрирует, как установить правый отступ элемента

Установите верхний отступ
Этот пример демонстрирует, как установить верхний отступ элемента

Установите нижний отступ
Этот пример демонстрирует, как установить нижний отступ элемента

Проверьте себя с помощью упражнений!

Все CSS свойства отступа

Свойство	Описание
padding	Сокращенное свойство для установки всех свойств отступа в одном объявлении
padding-bottom	Устанавливает нижний отступ элемента
padding-left	Устанавливает левый отступ элемента
padding-right	Устанавливает правый отступ элемента
padding-top	Устанавливает верхний отступ элемента

ПАЛИТРА ЦВЕТОВ

Получите ваш
Сертификат сегодня!

Связь с админом

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.

На рисунке ниже наглядно представлены параметры отступов блоков:

Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них здесь. В уроке используются пиксели.

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding. Итак, давайте рассмотрим пример задания внутренних отступов у блока:

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

Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) — величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin. Примеры внешних отступов в CSS:

Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.

Большую часть времени веб-разработчики тратят на то, где будет располагаться текст и, как он будет выглядеть. Существует множество свойств, которые позволяют работать с текстом. Иногда текст и шрифты используют как синонимы. Разделим эти два понятия. Текст – это содержимое, а шрифт – это то, что отображает содержимое.

Одним из самых распространенных эффектов является отступ первой строки абзаца (в просторечие: красная строка). Он позволяет создать видимость структурированности текста.

Свойство text-indent реализует отступы в CSS. Рассмотрим его синтаксис:

Результатом применения свойства является смещение первой строки любого блочного элемента на заданную длину или процентное соотношение. Допускаются отрицательные значения. Не допускается применение свойства к строковым элементам. Далее пример применения свойства text-indent .

В результате первая строка абзацев будет сдвинута на 1.5em . Если задать отрицательное значение, то получится не отступ, а выступ, т.е. первая строка будет выдвинута влево, относительно элемента.

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

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

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

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

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

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

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

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

Читайте также: