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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

 ![enter image description here]()

 

Лучшее, что я видел, объясняя это примерами, диаграммами и даже "попробовать сами", - это [здесь](https://www.w3schools.com/css/css_boxmodel.asp).

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

 ![enter image description here]()

Одна вещь, о которой следует иметь в виду, - это браузеры, совместимые со стандартами ([IE quirks - это исключение](https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка [с поддержкой Bootstrap 3](/questions/2268/using-box-sizing-border-box-with-twitter-bootstrap-2x-can-we-do-it-easily-without-breaking-everything/24916#24916).

 

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

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

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

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

  1 Эта модель окна по умолчанию может быть изменена с помощью атрибута [`box-sizing`](https://www.paulirish.com/2012/box-sizing-border-box-ftw/).

 

  **MARGIN** vs  **PADDING**:

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

Пожалуйста, смотрите ниже изображение, извлеченное из [Margin Vs Padding - Свойства CSS](http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html)

 ![Margin vs Padding]()

 

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

> 
> Объяснение различных частей:
> 
> 
> * **Содержимое** - содержимое поля, в котором отображается текст и изображения
> * **Обивка** - очищает область вокруг содержимого. Прокладка прозрачная
> * **Граница** - граница вокруг отступов и содержимого
> * **Маржа** - очищает область за пределами границы. Поля прозрачные
> 
>  [![Illustration of CSS box model]()](/img/5585f2fd8012205f0ac17e3769bc4c79.png)
> 
> 
> 

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



Вот несколько 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>
```



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

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

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

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

 

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

 ![enter image description here]()

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

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

 

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

 

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

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

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

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

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

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

 

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

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



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

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

 

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

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

   

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

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

 [![Margin and Padding]()](/img/9025217b5c369049108faa13e7e9f50c.png)

Это изображение из [codemancers](http://crypt.codemancers.com/) показывает, как границы и границы становятся доступными, а также то, как границы и контент-ящик делают их разными.

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

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

 

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

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

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

  Смотрите больше на [Css Margin и padding](https://tutorial.techaltum.com/cssboxmodel.html)

 

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

[![box model image]()](/img/cb38b1c3d5b50a9f294f931b154bb147.png)

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

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

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

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

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



 Margin
-------

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

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

 Перетяжка
----------

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

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

 

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

 

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

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