Коли використовувати margin vs padding в 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>

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

• Використовуйте поле, щоб відокремити блок від речей поза ним
• Використовуйте padding, щоб перемістити вміст від країв блоку.

Краще, що я бачив, пояснюючи це на прикладах, діаграмах і навіть перегляді "спробуй сам" тут .

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

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

Існує більше технічних пояснень щодо вашого питання, але якщо ви шукаєте спосіб подумати над маржами та накладками, які допоможуть вам вибрати, коли і як ними користуватися, це може допомогти.

Порівняйте елементи блоків із зображеннями, які висять на стіні:

• Вікно браузера - це як стіна.
• Зміст так само , як на фотографії.
• Маржа точно так само як простір стіни між фреймами картинами.
• Оббивка точно так само як циновки навколо фотографії.
• Кордон точно так само як кордону на рамі.

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

¹ Ця модель вікна за замовчуванням може бути змінена box-sizingатрибутом .

MARGIN vs PADDING :

1. Поле використовується в елементі для створення відстані між цим елементом та іншими елементами сторінки. Там, де підкладка використовується для створення відстані між вмістом та рамкою елемента.

2. Поле не є частиною елемента, де накладка є частиною елемента.

Нижче див. Зображення, витягнуте з 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 не дуже добре ставиться до негативних марж.

Поля очищає область навколо елемента (поза межами), але прокладка очищає область навколо вмісту (всередині межі) елемента.

це означає, що ваш елемент не знає про свої зовнішні поля, тому, якщо ви розробляєте динамічні веб-елементи управління, я рекомендую вам використовувати padding vs margin, якщо можете.

зауважте, що іноді доводиться використовувати маржу.

Добре знати відмінності між marginта padding. Ось деякі відмінності:

• Поле - це космічний простір елемента, тоді як підкладка - це внутрішній простір елемента.

• Поля - це простір поза межами елемента, тоді як прокладка - це простір всередині його межі.

• Поле приймає значення 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) Поле

Властивості поля CSS використовуються для генерування простору навколо елементів.
Властивості поля встановлюють розмір білого простору поза межами кордону. За допомогою CSS ви маєте повний контроль над маржами.
Існують властивості CSS для встановлення поля для кожної сторони елемента (верхній, правий, нижній та лівий).

2) Прокладка

Властивості накладки CSS використовуються для генерування простору навколо вмісту.
Прокладка очищає область навколо вмісту (всередині межі) елемента.
За допомогою CSS ви маєте повний контроль над прокладкою. Існують властивості CSS для налаштування прокладки для кожної сторони елемента (верхній, правий, нижній та лівий).

Так просто Поля - це простір навколо елементів, тоді як Padding - це простір навколо вмісту, який є частиною елемента.

Це зображення кодеманса показано, як та межі змінюються, і як рамки рамки та поле змісту відрізняють його.

Також вони визначають кожен розділ як нижче:

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

Я завжди використовую цей принцип:

Це модель коробки з функції перевірки елементів у Firefox. Це працює як цибуля:

• Ваш вміст знаходиться посередині.
• Прокладка - це простір між вашим вмістом та краєм тегу, який він знаходиться всередині.
• Кордон та його технічні характеристики
• Поле - це простір навколо тегу.

Таким чином, великі поля дозволять зробити більше місця навколо вікна, де міститься ваш вміст.

Більш великі накладки збільшать простір між вашим вмістом і коробкою, де він знаходиться всередині.

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

Маржа

Поля зазвичай використовується для створення простору між самим елементом та його оточенням.

наприклад, я використовую його, коли будую навігаційну панель, щоб вона прилипала до країв екрана і не мала білого розриву.

Прокладки

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

Отже коротко, це ситуативно; це залежить від того, що ви намагаєтеся зробити.

Поля знаходиться поза коробкою, а підкладка знаходиться всередині коробки