"18.234.111.56 - 18.234.111.56"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

enter image description here

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

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

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

enter image description here

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

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

MARGIN vs PADDING:

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

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

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

Margin vs Padding

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

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

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

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

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

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

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

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

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

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

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

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

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

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

enter image description here

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

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

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

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

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

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

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

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

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

Illustration of CSS box model

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1) Маржа

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


2) Прокладка

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

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

Margin and Padding

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

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

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

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

  • Margin - это внешнее пространство элемента, а padding - это внутреннее пространство элемента.

  • Поля - это пространство за границей элемента, а отступы - это пространство внутри границы элемента.

  • Margin принимает значение auto: margin: auto, но вы не можете установить отступ для auto.

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

  • Когда вы стилизуете элемент, это также влияет на отступы (например, цвет фона), но не на поля.

12
13 июня '16 в 20:32
источник

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

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

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

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

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

Margin

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

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

Перетяжка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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