Чем отличается margin от padding css

Урок 6. Отступы и поля в CSS. Что такое margin и padding?

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

padding

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

Единицами измерения могут быть пиксели (px) или процентное соотношение (%).

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

padding-top — свойство, создающие поля сверху.
padding-right — свойство, создающие поля справа.
padding-bottom — свойство, создающие поля снизу.
padding-left — свойство, создающие поля слева.

Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения — от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:

padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;

margin

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

Для указания отступов лишь с определенных сторон существуют следующие свойства:

margin-top — свойство, создающие отступы сверху.
margin-right — свойство, создающие отступы справа.
margin-bottom — свойство, создающие отступы снизу.
margin-left — свойство, создающие отступы слева.

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

отличия использования позиционирования и margin

С того момента, как я узнал о позиционировании в css , для меня является загадкой разница между отступами с помощью margin (1) и top\right\bottom\left (2).

В моём представлении, эти два атрибута делают одно и то же, и единственное их различие, которое смог найти — это то, что (1) относится к box-model , когда (2) — нет.

Так же знаю о применении (2) для "относительности сторон", т.е. вещи вроде:

И тогда он будет "прибит" к левому верхнему краю.

Вопрос состоит в том, когда какой инструмент использовать?

Чтобы понять разницу, вам нужно попробовать поставить больше одного элемента:

Вы видите в примере, что margin создает настоящий отступ вокруг каждого элемента, сдвигая соседние.

top/left же просто сдвигает элементы вниз и влево, никак не влияя на верстку. Теоретически, top/left больше похож на transform: translate , с отличием в аппаратном ускорении и относительных еденицах

Чем отличается margin от padding css

Когда использовать margin или padding в CSS

Есть ли при написании CSS какое-то конкретное правило или указание, которое следует использовать при принятии решения, когда использовать margin а когда использовать padding ?

Ответы

TL; DR: по умолчанию я использую маржу везде, кроме тех случаев, когда у меня есть граница или фон и я хочу увеличить пространство внутри этого видимого поля.

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

Рассмотрим два элемента, расположенных один над другим, с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.

Таким образом, вы получите содержимое первого элемента, за которым следует заполнение первого элемента, за которым следует заполнение второго элемента, а затем содержимое второго элемента.

Таким образом, содержимое двух элементов окажется разделенным на 2em .

Теперь замените это заполнение полем 1em. Поля считаются находящимися за пределами элемента, а поля соседних элементов будут перекрываться.

Итак, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, за которым следует содержимое второго элемента. Таким образом, содержимое двух элементов находится на расстоянии всего 1em .

Это может быть действительно полезно, когда вы знаете, что хотите указать 1em интервала вокруг элемента, независимо от того, с каким элементом он находится рядом.

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

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

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