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

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

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

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

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

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

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

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

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

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

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

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

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

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

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

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

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

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

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

• Окно браузера похоже на стену.
• Содержание так же , как на фотографии.
• Маржа точно так же как пространство стены между фреймами картинами.
• Обивка точно так же как циновки вокруг фотографии.
• Граница точно так же как границы на раме.

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

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

MARGIN против PADDING :

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

2. Margin не является частью элемента, где padding является частью элемента.

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

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

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

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

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

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

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

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

Вот некоторый 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 , чтобы сохранить " подгонку » и не мешать другим элементам вокруг него.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть два исключения при использовании padding является целесообразным использование:

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

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

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

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

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

1) Margin

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

2) Заполнение

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

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

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

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

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

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

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

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

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

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

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

Прибыль

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

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

набивка

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

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

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