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

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

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

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

диаграмма ниже, я думаю, дает мгновенное визуальное понимание разницы.

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

окраины vs обивка :

1. Margin используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Где заполнение используется для создания расстояния между содержимым и границей элемента.

2. Margin не является частью элемента, где заполнение является частью элемента.

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

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

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

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

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

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

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

$(".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>

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

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

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

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

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

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

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

когда использовать поля и отступы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расширенная маржа против заполнения объясняется

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

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

1. он применяется к встроенному элементу, который не может содержать дочерние элементы, такие как элемент input.

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

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

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

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

1) маржа

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

2) обивка

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

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

Это codemancers показывает, как поля и границы получить togther и как границы box и content-box сделать его другим.

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

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

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

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

CSS Margin, padding и border-это свойства модели коробки.

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

общая ширина=содержание-ширина + обивка + граница.

окраины

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

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

обивка

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

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

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

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

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

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

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

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

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