css - это - что лучше использовать margin или padding




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

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

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

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

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

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

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

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

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

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

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

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


Поле

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

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

набивка

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

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


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


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

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

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

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

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


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


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

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


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

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

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


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


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

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

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

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

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

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


MARGIN vs PADDING :

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

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

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


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

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

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

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

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





margin