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


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


1943


источник


Ответы:


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

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

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

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

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


1187



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

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

enter image description here


1327



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

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

enter image description here

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


521



ПОЛЕ против PADDING :

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

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

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

Margin vs Padding


73



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

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

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

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

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


70



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

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

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

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


29



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


28



The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.

enter image description here

it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.

note that some times you have to use margin.


26



When to Use Margins and Padding

There are two ways in CSS to create space around your elements: margins and padding.In most usage scenarios, they are functionally identical but in truth, they do behave in slightly different ways. There are important differences between margins and padding that you should take into consideration when choosing which to use to move elements around the page. However, in those cases where either margins or padding could be used to the same effect, a lot of the decision comes down to personal preference.

When to use margins

  1. You want your spacing to appear outside of the “box” created by a border property. Margins lie outside of borders, so you’d use them if you want your border to stay in one place. This can be useful if you have, for example, a sidebar with a border that you want to move away from your main content area.

  2. You don’t want your background color or image to invade your personal space. Background colors and images stop at the border, so if you’d rather keep your backgrounds out of the space you’re making, margins are the property you want.

  3. You’d like collapsible space on the top and bottom of your element. Top and bottom margins behave differently than side margins in that if two margins are atop one another, they collapse to the size of the largest margin set. For example, if I set paragraph to have a top margin of 20 pixels and a bottom margin of 15 pixels, I’ll only have 20 pixels of space total between paragraphs (the two margins collapse into one another, and the largest wins out).

When to use padding

  1. You want all of the space you’re creating to be inside your border. Padding is contained within your borders, so it’s useful for pushing your borders away from the content inside of your element.

  2. You need your background color/image to continue on into the space you’re creating. Your background will continue on behind your padding, so only use it if you want your background to peek out.

  3. You want your top and bottom space to behave more rigidly. For example, if you set the paragraphs in your document to have a top padding of 20 pixels and a bottom padding of 15 pixels, then any time you had two paragraphs in a row, they’d actually have a total of 35 pixels of space between them.


19



Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

Showing various parts

Here is the live example: (play around with changing the values) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel


19