Отступы CSS

CSS - Размер элемента

Селектор:

table; div; img; .name

Свойство:

width; height; max-height; max-width; min-height; min-width;

Значения:

px; %; em; rem; auto

Имея текст, изображения или другие элементы на странице, заключённые в блоки, или <img>, важно правильно настроить отступы между этими элементами. Без таких настроек элементы будут «прилипать» друг к другу, делая страницу неопрятной и неудобной для восприятия. Чтобы избежать этого, необходимо задать параметры отступов в CSS.

Если у вас возникнут вопросы по теме оформления отступов, вы можете обсудить их на нашей странице обсуждения.

Оформление отступов

Основная статья: Энциклопедия CSS: margin

Основная статья: Энциклопедия CSS: padding

Отступы бывают двух типов: ‘’‘внутренние’’’ (padding) и ‘’‘внешние’’’ (margin). Рассмотрим их на примере обычного блока, внутри которого размещён текст:

<div style="border: 1px solid blue; width:50%;">Текст, картинка, ссылка или другие элементы страницы</div>

В этом примере текст «прилипает» к границам блока, что выглядит неэстетично. Чтобы исправить это, можно задать отступы.

• Внутренние отступы добавляют пространство между содержимым блока и его границами.
• Внешние отступы создают промежуток между блоком и соседними элементами.

Пример CSS-кода

#name {
border: 1px solid blue;
padding: 4px;
margin: 2px;
}

• padding — внутренний отступ со всех сторон элемента.
• margin — внешний отступ со всех сторон элемента.

Размер отступов задаётся в пикселях (например, 4px и 2px), но это значение можно изменять по своему усмотрению.

Применяя этот стиль, мы получим такой результат:

Текст, картинка, ссылка или другие элементы страницы

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

Индивидуальная настройка отступов

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

Внутренние отступы (padding)

• padding-top — верхний внутренний отступ.
• padding-bottom — нижний внутренний отступ.
• padding-left — левый внутренний отступ.
• padding-right — правый внутренний отступ.

Внешние отступы (margin)

• margin-top — верхний внешний отступ.
• margin-bottom — нижний внешний отступ.
• margin-left — левый внешний отступ.
• margin-right — правый внешний отступ.

Оформление отступов для изображений

Чтобы текст не «прилипал» к изображениям на странице, важно задавать внешние отступы. Например:

#img {
  margin: 6px;
}

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

#img {
  margin-right: 6px;
}

Этот стиль создаёт отступ только справа от изображения, что позволяет настроить дизайн более гибко.

Примечание

Если у вас есть вопросы по настройке отступов или других CSS-свойств, вы можете обсудить их на странице обсуждения.

Статьи по теме CSS