Питання Коли використовувати CSS у маргінальних та пробілках


При написанні CSS, чи існує певне правило чи настанови, які слід використовувати для визначення часу використання margin і коли користуватися padding?


1973
2018-02-03 03:20


походження




Відповіді:


TL; DR:  За замовчуванням я використовую поля в будь-якому місці, крім випадків, коли у мене є межа або тло, і ви хочете збільшити простір всередині цього видимого вікна.

Для мене найбільша різниця між проміжками та маржі полягає в тому, що вертикальний поля автоматичного колапсу, а оббивка ні. Розглянемо два елементи одного над іншим, кожне з яких має заповнення 1ем. Це заповнення вважається частиною елемента, і завжди зберігається. Таким чином, ви отримаєте контент першого елемента, а потім заповнення першого елемента, а потім заповнення другого, а потім вміст другого елемента. Таким чином, зміст цих двох елементів закінчиться двома окремими.

Тепер замінити цю подушку на поле 1em. Маржина вважається поза межами елемента, а поля суміжних предметів збігаються. Таким чином, у цьому прикладі ви отримаєте контент першого елемента, а потім 1em з комбінованого поля, а потім - вміст другого елемента. Таким чином, зміст цих двох елементів буде лише один раз.

Це може бути дійсно корисним, коли ви знаєте, що ви хочете сказати 1ме інтервалу навколо елемента, незалежно від того, який елемент він поруч.

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


1217
2018-02-07 20:59



+1 При оформленні типографіки та абревіатурних послідовностей абзаців, заголовків і списків це є майже завжди краще простору елементи з полями з-за сусідньої крах руйнування поведінки. - Pete B
Слід зазначити, що тільки вертикальні поля зникнуть, горизонтальні поля не зникнуть. Див CSS 2.1 специфікація для більш детальної інформації. - JPelletier
Чому вертикальні краю колапсують, тоді як горизонтальні? Це може заплутати багатьох людей - marcospgp
Вертикальні поля лише руйнуються для блочних елементів. Для вбудованих елементів блокування поля додаються як вертикально, так і горизонтально. Тому я не впевнений, що проблема полягає в тому, що горизонтальні поля не руйнуються на елементах блоку, оскільки вони все-таки заповнюють їх контейнер. - Mike
"За умовчанням я користуюсь полями скрізь, крім випадків, коли у мене є межа або тло, і ви хочете збільшити простір всередині цього видимого поля". - Велике зауваження, я, як правило, роблю це навпаки і завжди противиться узгодженості. - Yannic Welle


Маржа розташована назовні елементів блоку, тоді як внутрішнє полоскання.

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

enter image description here


1338
2018-02-03 03:22



Однак правильну відповідь належить до @pavon нижче. поля суміжних елементів перекриваються, тоді як заповнення не перекривається. я е., точне відокремлення є padding(A) + padding(B) + max(margin(A), margin(B)) - necromancer
Ось хороша практика: скористайтеся тверда червона межа щоб перевірити заповнення і маржу. Іноді ми могли б переполохувати такі речі, як <a>, який містить деякий текст, в оточенні заповнення та маржі. Використовуйте цей трюк, щоб перевірити, скільки місця ми можемо натиснути. - chenghuayang


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

Наведена нижче схема, на мою думку, дає негайне візуальне розуміння різниці.

enter image description here

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


525
2018-05-04 19:21



w3.org/TR/CSS2/box.html#box-dimensions і картинка з w3 w3.org/TR/CSS2/images/boxdim.png - JP Hellemons


MARGIN проти ПАДДИНГ :

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

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

Будь ласка, зверніться до наведеного зображення з Margin Vs Padding - властивості CSS

Margin vs Padding


77
2018-05-21 07:00



Посилання на кордон, а не на досить розпливчасте поле "Маржа знаходиться назовні елементів блоку, тоді як внутрішній простір". зовні / зсередини що? І зовнішній / внутрішній припускає статичне положення, а не те, що воно впливає на розмір містячого елемента. Ця відповідь зрозуміла це для мене. - nicodemus13


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

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

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

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

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


73
2017-12-17 01:10



Насправді я не згоден box-sizing: border-box роблячи "простір для змісту менше". Ось скрипка з двома ящиками, де, якщо б я продовжував заповнювати ті ж самі і додавав "Актив", то "Деактивувати" на наведенні, не має значення, чи я використовував box-sizing. Це все одно розширить коробку. Мені довелося максимально витягнути прокладку, щоб довше розширити коробку, а потім використати пробну та помилку, щоб знайти відповідну комбінацію для інших слів, які йдуть у коробку, що залишить його однаковою шириною для кожного слова: jsfiddle.net/navyjax2/ngzqqjah - vapcguy
Привіт, вапчуй, дякую за ваш внесок. Моє твердження, як правило, істинно, коли ширина або висота оголошується для елемента, тоді як елемент з незадекларованими розмірами насправді не впливає border-box (побачити: jsfiddle.net/8yravLmL/1) Я зроблю свою відповідь більш нюансною, щоб уникнути плутанини. - stvnrynlds


Ось якийсь 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>


30
2018-02-09 05:29



ви можете запустити подібний код на jsfiddle: jsfiddle.net/fschwiet/y74Nz/3 - Frank Schwieterman


Річ у полях полягає в тому, що вам не потрібно турбуватися про ширину елемента.

Любіть, коли ти щось даєш {padding: 10px;}, вам доведеться зменшити ширину елемента на 20 пікс щоб зберегти "придатний"і не порушувати інші елементи навколо нього.

Тому я взагалі починаю, використовуючи прокладки, щоб отримати все "packed'а потім використовувати поля для незначних налаштувань.

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


30
2018-02-03 05:35





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

enter image description here

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

Зауважте, що кілька разів ви повинні використовувати маржу.


27
2017-08-01 11:28





Коли використовувати поля та прокладки

У CSS існує два способи створення простору навколо ваших елементів: полями та пробілами. У більшості сценаріїв використання вони функціонально ідентичні, але насправді вони поводяться дещо по-іншому. Існують важливі відмінності між полями та подушками, які слід враховувати при виборі того, що використовувати для переміщення елементів навколо сторінки. Проте, у тих випадках, коли будь-які поля та пробіли можуть бути використані для того самого ефекту, багато рішення зводиться до особистих уподобань.

Коли використовувати маржі

  1. Ви хочете, щоб ваш інтервал з'явився за межами вікна, створеного власником кордону. Маржі розташовані за межами кордонів, тому їх слід використовувати, якщо ви хочете, щоб ваша межа залишалася в одному місці. Це може бути корисним, якщо у вас, наприклад, бічна панель з кордоном, яку ви хочете відійти від основної області вмісту.

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

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

Коли використовувати пробій

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

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

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


21
2017-09-09 20:00