Отступы и поля в CSS: полное руководство

5 января 2021 г.

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

В чем разница между отступами и полями в CSS?

В CSS термины margin и padding относятся к границам вокруг элементов веб-страницы, таких как текст и изображения. Однако эти два термина относятся к разным областям:

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

• Отступ: отступ — это пространство между элементом и содержимым внутри этого элемента. Отступы определяют, как элементы выглядят в контейнере и какая часть фона контейнера отображается. Вы можете изменить отступ любого элемента в CSS. По мере увеличения отступа элемент автоматически становится меньше для компенсации, и наоборот.

Что такое блочная модель CSS?

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

• Поля: это пустая область между границей и внешними краями поля.

• Граница: это линия, которая проходит по периметру элемента между полем и отступом.

• Отступы: это пустая область между границей и содержимым.

• Содержимое: это текст или графика внутри заполнения, которое обычно представляет собой элемент на основе HTML.

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

Советы по добавлению полей в CSS

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

• Маржа-верх

• Нижняя граница

• Поле слева

• Поле справа

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

• Одно значение: это относится в равной степени ко всем четырем сторонам.

• Два значения: первое применяется к верхнему и нижнему полям, а второе — к левому и правому полям.

• Три значения: первое применяется к верхнему полю, второе — к левому и правому полям, а третье — к нижнему полю.

• Четыре значения: первое применяется к верхнему полю, второе — к правому полю, третье — к нижнему полю и четвертое — к левому полю.

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

Хотя вы можете установить определенные поля для каждого поля CSS, вы также можете разрешить им автоматически центрировать внутренний элемент, независимо от размера экрана веб-страницы. Установите значение поля на «авто», чтобы элемент всегда располагался по центру по горизонтали.

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

Рассмотрите возможность добавления полей, если вы хотите:

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

• Не допускайте соприкосновения элементов друг с другом. Использование полей позволяет создавать пустое пространство между элементами, даже если они не имеют отступов.

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

Советы по добавлению отступов в CSS

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

• Обивка

• Паддинг-дно

• Отступ слева

• Отступы справа

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

Однако, в отличие от полей, заполнение не поддерживает отрицательные значения. Кроме того, вы не можете установить значение «авто» для автоматической настройки отступов. Это означает, что вы должны установить положительное значение заполнения для каждого поля CSS на любом веб-сайте, который вы разрабатываете.

Рассмотрите возможность использования отступов, если вы хотите:

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

• Сохраняйте больший контроль над расстоянием между встроенными элементами. С помощью отступов вы можете предотвратить перекрытие встроенных элементов или нарушение дизайна страницы.

• Не допускайте попадания содержимого на края контейнера. Использование заполнения запрещает касание текста в соседних полях CSS, что может облегчить чтение абзацев или заголовков.

• Отображение фона контейнера. Вы также можете разместить фоны двух контейнеров непосредственно рядом друг с другом. Используя отступы, а не поля, вы можете сопоставить два поля CSS, сохраняя при этом пространство между изображением или текстом и границей контейнера.

• Установите видимую границу. С помощью отступов вы можете оставить пространство между границей и элементом, что может быть важно, если граница не является прозрачной.