Разница между полем и отступом?

Question

Какая разница между margin и padding в CSS? Это действительно, кажется, не имеет большого значения. Не могли бы вы привести пример того, где лежат различия (и почему важно знать разницу)?

Answer 1

padding - это пробел между содержимым и border, тогда как margin - это пробел за пределами границы. Вот изображение, которое я нашел из быстрого поиска в Google, которое иллюстрирует эту идею.

Answer 2

Одна ключевая вещь, которая отсутствует в ответах здесь:

Поля сверху / снизу складываются.

Так что, если у вас есть поле в 20px внизуэлемент и поле в 30px вверху следующего элемента, поле между двумя элементами будет 30px, а не 50px.Это не относится к левому / правому краю или отступам.

Answer 3

Маржа применяется к вне вашего элемента, следовательно, влияет на то, как далеко ваш элемент находится от других элементов.

Заполнение применяется к внутри вашего элемента, что влияет на то, как далеко содержимое вашего элемента находится за пределами границы.

Кроме того, использование поля не повлияет на размеры вашего элемента, в то время как отступы сделают размеры ваших элементов (задайте высоту + отступ), поэтому, например, если у вас есть div 100x100px с отступом 5 px, ваш div на самом деле будет 105x105px

Answer 4

Запомните эти 3 пункта:

• Маржа - это дополнительное пространство вокруг элемента управления.
• Заполнение дополнительного пространства внутри элемента управления.
• Заполнение внешнего контроля - это Маржа внутреннего контроля .

Демонстрационное изображение: (где красная коробка - это контроль желания)

Answer 5

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

Answer 6

Заполнение

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

Margin

Margin - это свойство CSS, которое определяет пространство снаружи элемента до его следующего внешнего элемента.

Margin влияет на элементы, которые имеют или не имеют границ.Если элемент имеет границу, margin определяет пространство от этой границы до следующего внешнего элемента.Если элемент не имеет границы, то поле margin определяет пространство от содержимого элемента до следующего внешнего элемента.

Разница между отступом и полем

Таким образом, разницамежду margin и padding заключается в том, что в то время как padding имеет дело с внутренним пространством, margin имеет дело с внешним пространством до следующего внешнего элемента.

Answer 7

Заполнение - это пробел внутри границы, тогда как Margin - это пробел за пределами границы.

Answer 8

поле = пространство вокруг (снаружи) элемента от границы наружу.

padding = пространство вокруг (внутри) элемента от текста до границы.

см. Здесь: http://jsfiddle.net/robx/GaMpq/

Answer 9

Полезно знать о различиях между margin и padding.Как я знаю:

• Маржа - это внешнее пространство элемента, в то время как отступ - это внутреннее пространство элемента.Другими словами, margin - это пространство за пределами границы элемента, а padding - это пространство внутри его границы.
• Вы можете установить значение auto на полях.Тем не менее, это не допускается для заполнения. Смотрите это . Примечание: Используйте margin: auto, чтобы центрировать элемент блока внутри его родительского элемента по горизонтали.Кроме того, можно отцентрировать элемент внутри flexbox по вертикали, горизонтали или по обоим, установив для поля значение auto. Смотрите это .
• Поля могут быть любым числом с плавающей запятой, но отступ не должен быть отрицательным.
• Когда вы стилизуете элемент, стиль также будет стилизован;но не маржа.Маржа получает стиль родительского элемента.Например, когда вы устанавливаете для свойства background-color черный цвет, его внутреннее пространство (т. Е. Заполнение) будет черным, а не его внешнее пространство (т. Е. Поле).

Answer 10

Одно из ключевых отличий между полем и отступом не упоминается ни в одном из ответов: кликабельность и обнаружение зависания

Увеличение отступов увеличивает эффективный размер элемента. Иногда у меня есть маленькая иконка, которую я не хочу делать заметно больше, но пользователю все равно нужно взаимодействовать с этой иконкой. Я увеличиваю отступ значка, чтобы увеличить его размер для щелчков и наведения. Увеличение поля значка не будет иметь тот же эффект.

Ответ на другой вопрос по этой теме приводит пример.