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

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

1906
задан 03 февр. '10 в 6:20
источник поделиться
19 ответов

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

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

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

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

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

1154
ответ дан 07 февр. '12 в 23:59
источник

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

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

enter image description here

1317
ответ дан 03 февр. '10 в 6:22
источник

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

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

enter image description here

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

512
ответ дан 04 мая '11 в 22:21
источник

MARGIN vs PADDING:

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

  • Маржа не является частью элемента, где дополнение является частью элемента.

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

Margin vs Padding

70
ответ дан 21 мая '13 в 10:00
источник

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

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

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

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

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

68
ответ дан 17 дек. '13 в 4:10
источник

Вот несколько 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>
28
ответ дан 09 февр. '10 в 8:29
источник

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

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

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

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

28
ответ дан 03 февр. '10 в 8:35
источник

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

enter image description here

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

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

25
ответ дан 01 авг. '14 в 14:28
источник

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

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

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

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

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

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

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

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

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

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

18
ответ дан 09 сент. '15 в 23:00
источник

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

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

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

Border (Граница) - граница, проходящая вокруг отступов и содержимого

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

Отображение различных частей

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

16
ответ дан 03 нояб. '16 в 14:43
источник

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

16
ответ дан 03 февр. '10 в 6:28
источник

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

1) Маржа

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


2) Прокладка

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

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

Margin and Padding

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

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

  • Контент - определяет область содержимого поля, в котором находится фактическое содержимое, например текст, изображения или другие элементы.
  • Прокладка - это очищает основной контент от его поля.
  • Граница - это окружает как контент, так и дополнение.
  • Маржа - эта область определяет прозрачное пространство, которое отделяет его от других элементов.
11
ответ дан 24 мая '17 в 14:02
источник

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

Нецелесообразно использовать 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, чтобы обеспечить ожидаемое поведение во всех браузерах.

10
ответ дан 29 дек. '16 в 20:28
источник

Поля CSS, отступы и границы - это свойства Box Model.

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

Общая ширина = ширина содержимого + дополнение + граница.

4
ответ дан 10 сент. '16 в 9:32
источник

Хорошо понимать разные между margin и padding. Существуют некоторые отличия:

  • Маржа - это внешнее пространство элемента, а Padding - внутреннее пространство элемента.
  • Маржа - это пространство за пределами элемента, а Padding - это пространство, находящееся внутри границы.
  • Маржа может быть значением auto: margin: auto, но вы не можете присвоить значение auto.
  • Маржа может быть установлена ​​на любые числа, но заполнение должно быть неотрицательным.
  • Когда вы создаете элемент, он также влияет на пространство прокладки (например, цвет фона), но не на маржу.
3
ответ дан 13 июня '16 в 20:32
источник

Margin

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

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

Перетяжка

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

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

2
ответ дан 02 марта '18 в 21:12
источник

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

образ окна модели

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

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

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

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

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

1
ответ дан 23 марта '18 в 20:52
источник

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

0
ответ дан 29 марта '18 в 13:41
источник

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

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

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

-2
ответ дан 11 марта '16 в 17:04
источник

Другие вопросы по меткам или Задайте вопрос