CSS Margin и Padding: в чем разница?

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

Маржа против заполнения

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

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

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

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

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

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

Что такое маржа?

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

Как создать поля с помощью CSS

При создании полей с помощью CSS выполните следующие действия:

1. Понимание маржинального порядка и свойств

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

2. Решите, какими полями вы хотите управлять

Вы можете установить поля, используя от одного до четырех значений. Если вы хотите, чтобы поля со всех сторон элемента были одинаковыми, примените одно значение. Если вам нужны разные объемы пространства, важен порядок, в котором вы применяете два или более значения. Два значения влияют только на верх и низ, затем на право и лево. Три значения влияют на верхнее, правое и левое, а затем нижнее поля. Четыре значения влияют на верхнее, правое, нижнее и левое поля соответственно.

3. Укажите значение

Вы можете установить поля вручную, используя длины или проценты. Вы также можете использовать функцию auto, чтобы позволить браузеру компьютера установить их, или применить функцию наследования, чтобы наследовать отступы родительского элемента. Процент использует символ «%», а длина использует такие единицы, как пиксель (px), пункт (pt) или сантиметр (cm). Например, если вы хотите создать поля вокруг элемента размером 20 пикселей сверху, 50 пикселей справа, 40 пикселей снизу и 80 пикселей слева, используйте этот код и порядок:

р { поле: 20px 50px 40px 80px }

4. Предотвратить коллапс

Если у вас есть элемент с нижним полем, за которым следует элемент с верхним полем, эти два поля могут объединяться так, как это называется «свернуть». Большее поле поглощает меньшее, чтобы создать большее пространство между этими двумя элементами. Чтобы избежать коллапса, используйте функцию контекста форматирования блока, чтобы содержать элемент, или используйте контейнеры flex и grid, чтобы создать правила форматирования для их содержимого.

Когда использовать маржу

Веб-дизайнеры обычно используют поля для:

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

• Изменить расстояние между элементами

• Не допускайте соприкосновения элементов

• Элементы перекрытия

• Центрировать элемент по горизонтали в пространстве

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

Вы можете настроить поля с отрицательными и положительными значениями, чтобы создать меньше или больше места.

Что такое прокладка?

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

Как создать отступ с помощью CSS

Выполните следующие действия, чтобы создать отступы в CSS:

1. Понимание порядка заполнения и свойств

Как и в случае с полями, вы можете установить отступ вокруг четырех сторон по часовой стрелке: сверху (отступ-сверху), справа (отступ-справа), снизу (отступ-снизу) и слева (отступ-слева).

2. Решите, сколько сторон вы хотите проложить

Опять же, вы можете использовать от одного до четырех значений для установки отступов, при этом одно значение влияет на все стороны равномерно. Два значения влияют только на верх и низ, затем на право и лево. Три значения влияют на верхнее, правое и левое, а затем нижнее поля. Четыре значения влияют на верхнее, правое, нижнее и левое поля соответственно.

3. Укажите значение

Вы можете установить заполнение, используя длину, процент или наследование. Например, если вы хотите создать отступ внутри контейнера размером 40 пикселей сверху, 80 пикселей справа, 60 пикселей снизу и 70 пикселей слева, используйте этот код и порядок:

div {отступ: 40px 80px 60px 70px}

Когда использовать прокладку

Padding — полезный инструмент, если вы хотите:

• Добавить пространство внутри поля или элемента

• Не допускайте соприкосновения контента с краями своего контейнера

• Разрешить элементам касаться или перекрывать друг друга, но не их текст

• Увеличьте размер элемента, например кнопки, но не текста внутри нее.

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