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

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

Ответ 1

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

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

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

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

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

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

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

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

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

Ответ 2

Маржа находится снаружи элементов блока, а внутренняя часть - внутри.

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

Ответ 3

Лучшее, что я видел, объясняя это примерами, диаграммами и даже "попробовать сами", - это здесь.

Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.

Одна вещь, о которой следует иметь в виду, - это браузеры, совместимые со стандартами (IE quirks - это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3.

Ответ 4

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

Сравните элементы блока с картинками, висящими на стене:

Окно браузера похоже на стену.
контент похож на фотографию.
margin похож на пространство между изображениями в рамке.
дополнение похоже на матирование вокруг фотографии.
Граница аналогична границе кадра.

При решении вопроса о марже и отступе полезно использовать эмпирическое правило margin, когда вы располагаете элемент в отношении к другим вещам на стене и дополнением. > когда вы настраиваете внешний вид самого элемента. Маржа не изменит размер элемента, но отступы обычно делают элемент больше ¹.

¹ Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing.

Ответ 5

MARGIN vs PADDING:

Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.
Маржа не является частью элемента, где дополнение является частью элемента.

Пожалуйста, смотрите ниже изображение, извлеченное из Margin Vs Padding - Свойства CSS

Ответ 6

С https://www.w3schools.com/css/css_boxmodel.asp

Объяснение различных частей:

Содержимое - содержимое поля, в котором отображается текст и изображения

Обивка - очищает область вокруг содержимого. Прокладка прозрачная

Граница - граница вокруг отступов и содержимого

Маржа - очищает область за пределами границы. Поля прозрачные

Пример из жизни (поиграйте, изменив значения):https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Ответ 7

Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin'd объектов, чтобы перейти к ее родительскому объекту.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Ответ 8

Что касается полей, то вам не нужно беспокоиться об ширине элемента.

Как и когда вы даете что-то {padding: 10px;}, вам нужно уменьшить ширину элемента 20px, чтобы сохранить " fit" и не нарушать другие элементы вокруг него.

Поэтому я обычно начинаю с использования paddings, чтобы получить все "packed", а затем использовать поля для небольших настроек.

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

Ответ 9

Поля очищают область вокруг элемента (вне границы), но добавка очищает область вокруг содержимого (внутри границы) элемента.

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

обратите внимание, что несколько раз вам нужно использовать margin.

Ответ 10

Одна вещь, которую следует отметить, - это то, что автокаталитические поля вас раздражают (и вы не используете цвета фона на своих элементах), что просто упрощает использование прокладок.

Ответ 11

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

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

Когда использовать поля

Вы хотите, чтобы ваш интервал появлялся за пределами поля, созданного свойством border. Поля лежат за пределами границ, поэтому вы используете их, если хотите, чтобы ваша граница оставалась в одном месте. Это может быть полезно, если у вас есть, например, боковая панель с рамкой, которую вы хотите отойти от основной области содержимого.
Вы не хотите, чтобы цвет фона или изображение вторгались в ваше личное пространство. Фоновые цвета и изображения останавливаются на границе, поэтому, если вы скорее сохраните свои фоны вне пространства, которое вы делаете, поля - это свойство, которое вы хотите.
Вы хотите сбрасывать пространство сверху и снизу вашего элемента. Верхний и нижний поля ведут себя иначе, чем боковые поля, в том случае, если два поля расположены поверх друг друга, они сворачиваются до размера самого большого набора полей. Например, если я установил абзац с верхним краем в 20 пикселей и нижним полем в 15 пикселей, у Ill будет всего 20 пикселей пространства между абзацами (два поля разваливаются друг на друга, а наибольшие выигрыши).

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

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

Ответ 12

Хорошо знать различия между margin и padding. Вот некоторые отличия:

Margin - это внешнее пространство элемента, а padding - это внутреннее пространство элемента.
Поля - это пространство за границей элемента, а отступы - это пространство внутри границы элемента.
Margin принимает значение auto: margin: auto, но вы не можете установить отступ для auto.
Для поля можно указать любое число, но отступы должны быть неотрицательными.
Когда вы стилизуете элемент, это также влияет на отступы (например, цвет фона), но не на поля.

Ответ 13

Разница расширенного поля и пояснения

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

При использовании padding существует два исключения:

Он применяется к встроенному элементу, который не может содержать дочерние элементы, такие как элемент ввода.
Вы компенсируете очень разную ошибку браузера, которую продавец * cough * Mozilla * cough * отказывается исправлять и быть уверенным (в той степени, в какой вы регулярно проводите обмен с редакторами W3C и WHATWG), которые вы должны иметь рабочее решение и это решение не будут влиять на стилирование чего-либо другого, кроме ошибки, которую вы компенсируете.

Когда у вас есть элемент 100% ширины с padding: 50px;, вы получите width: calc(100% + 100px);. Поскольку margin не добавляется в width, это не вызовет неожиданных проблем с макетами, если вы используете margin on child elements вместо padding непосредственно в элементе.

Итак, если вы не делаете одну из этих двух вещей, не добавляйте дополнение к элементу, а к нему следует использовать элемент child/children, чтобы обеспечить ожидаемое поведение во всех браузерах.

Ответ 14

Сначала посмотрим, каковы различия и какова каждая ответственность:

1) Маржа

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

2) Прокладка

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

Так просто Поля - это пространство вокруг элементов, а Прокладка - это пространство вокруг содержимого, которое является частью элемента.

Это изображение из codemancers показывает, как границы и границы становятся доступными, а также то, как границы и контент-ящик делают их разными.

Также они определяют каждый раздел, как показано ниже:

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

Прокладка - это очищает основной контент от его поля.

Граница - это окружает как контент, так и дополнение.

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

Ответ 15

CSS Margin, padding и border являются свойствами Box Model.

Маржа - это пространство вне контента.
Обивка - это пространство внутри контента.
Граница - это видимый контур (любой цвет, стиль и ширина) вне отступов.

Общая ширина Box Modal = content-width + padding + border.

Смотрите больше на Css Margin и padding

Ответ 16

Я всегда использую этот принцип:

Это блочная модель из функции проверки элементов в Firefox. Это работает как лук:

Ваш контент находится посередине.
Отступы - это пространство между вашим контентом и краем тега. внутри.
Граница и ее характеристики
Поле - это пространство вокруг тега.

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

Увеличенное заполнение увеличит пространство между вашим контентом и ящиком, в котором он находится.

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

Ответ 17

Margin

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

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

Перетяжка

Я обычно использую, когда у меня есть элемент внутри рамки, <div> или что-то подобное, и я хочу уменьшить его размер, но в то время, когда я хочу сохранить расстояние или границу между другими элементами вокруг него.

Так кратко, это ситуационный; это зависит от того, что вы пытаетесь сделать.

Ответ 18

Маржа находится за пределами поля, а заполнение находится внутри поля

Ответ 19

Другая информация о марже и заполнении с помощью Javascript.

В javascript вы можете получить высоту элемента. Если у вашего элемента есть отступы, вы получите правильную высоту, однако если у вас есть граница или маргинальная область, они будут проигнорированы.

Итак, в моем случае, когда я хотел исправить нижний колонтитул в нижней части моей страницы, вычислив высоту страницы и вычитая высоту/нижний колонтитул, чтобы зафиксировать минимальную высоту в моем разделе "контент", я добавляю для обертывания три секции в div и использование прокладки, чтобы получить нижний колонтитул справа внизу, не имея пикселя полосы прокрутки из-за полей.