Властивість CSS padding відповідає за завдання відступів всередині елемента від його межі

Синтаксис CSS padding

padding: top right bottom left;

• top - відступ від верхньої межі елемента;
• right - відступ від правої межі елемента;
• bottom - відступ від нижньої межі елемента;
• left - відступ від лівої межі елемента;

Значення найчастіше задаються в пікселях. Допускається також завдання у вигляді відсотків і інших допустимих одиницях CSS.

Примітка 1
Допускається Завдання не чотирьох значень. Залежно від кількості значень дії будуть різні:

• Якщо задано 3 значення, то перше значення встановлює відступ зверху, друге - одночасно зліва і справа, а третє - знизу
• Якщо задано 2 значення, то перше значення встановлює відступ зверху і знизу, друге - ліворуч і праворуч від вмісту
• Якщо задано 1 значення, то відступ задається однаковий відступ для всіх сторін. наприклад:

padding: 10px 10px 10px 10px; Можна задати компактніше: padding: 10px;

Примітка 2
На відміну від властивості CSS margin, негативні значення у padding не припустимі.

Також у padding є 4 окремих властивості CSS. Кожне з них відповідає за певний напрямок.

• padding-left - відступ від лівої межі елемента;
• padding-right - відступ від правої межі елемента;
• padding-top - відступ від верхньої межі елемента;
• padding-bottom - відступ від лівої межі елемента;

наприклад

padding: 3px 5px 7px 10px; Або можна задати докладно: padding-left: 10px; padding-right: 5px; padding-top: 3px; padding-bottom: 7px;

Приклади з різними відступами всередині елемента

Приклад 1. Відступ тексту всередині тега

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

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

Рис. 1. Поле слева от текста

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.

Краткая информация

Синтаксис

padding: [<размер> | <проценты>] {1, 4}

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Песочница

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

div { background: #e4efc7; padding: {{ playgroundValue }}px ; }

Пример

Кондуктометрія м'яко передає електронний спосіботримання незалежно від наслідків проникнення метілкарбіола всередину.

Результат даного прикладу показаний на рис. 2.

Мал. 2. Застосування властивості padding

об'єктна модель

об'єкт.style.padding

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) - специфікація схвалена W3C і рекомендована як стандарт.
• Candidate Recommendation ( можлива рекомендація) - група, що відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників по реалізації стандарту.
• Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення і внесення поправок для розгляду спільнотою.
• Editor "s draft ( редакторський чернетку) - чорнова версія стандарту після внесення правок редакторами проекту.
• Draft ( чернетка специфікації) - перша чорнова версія стандарту.

браузери

браузери

У таблиці браузерів застосовуються такі позначення.

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

padding

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

Одиницями виміру можуть бути пікселі (px) або процентне співвідношення (%).

#block (
padding: 12px; / * Відступ від кордонів блоку до змісту - з усіх боків буде 12 пікселів * /
}

Є можливість вказати поле тільки з однією певною боку:

padding-top- властивість, що створюють поля зверху.
padding-right- властивість, що створюють поля праворуч.
padding-bottom- властивість, що створюють поля знизу.
padding-left- властивість, що створюють поля зліва.

#block (
padding-bottom: 25px; / * Знизу поле 25 пікселів * /
padding-left: 15px; / * Зліва поле 15 пікселів * /
}

Як Ви помітили, якщо вказувати таким чином поля з 2-х або 3-х сторін, то вийде довгий код. Для цього існує скорочений запис властивості padding. У ній по черзі вказується все 4 значення - від кожного краю в один рядок, рух йде за годинниковою рядку, починаючи з верхнього:

Padding: ВерхнійОтступ ПравийОтступ ОтступСнізу ОтступСлева;

#block (
padding: 25px 10px 15px 6px; / * Зверху 25px, праворуч 10px, знизу 15px, зліва 6px * /
}

margin

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

#block (
margin: 4px;
}

Для вказівки відступів лише з певних сторін існують такі властивості:

margin-top- властивість, що створюють відступи зверху.
margin-right- властивість, що створюють відступи справа.
margin-bottom- властивість, що створюють відступи знизу.
margin-left- властивість, що створюють відступи зліва.

Як і у властивості padding, у margin теж є можливість скороченою записи значень для різних сторін. Рух йде за годинниковою стрілкою, з верхнього поля:

Margin: ВерхнійОтступ ПравийОтступ ОтступСнізу ОтступСлева;

#block (
margin: 15px 10px 5px 25px; / * Зверху 15px, праворуч 10px, знизу 5px, зліва 25px * /
}

Дякую за увагу!

У попередньому розділі ми згадували про такі властивості CSS, як margin (поле) і padding (відступ). Тепер ми зупинимося на них більш детально і розглянемо, чим вони відрізняються один від одного і які особливості мають.

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

Padding відокремлює вміст від кордону блоку, а margin створює проміжки між блоками

Як бачите, поля і відступи CSSвідрізняються між собою, хоч іноді без перегляду коду і не можна визначити, за допомогою якого властивості задано відстань. Це трапляється в тих випадках, коли відсутня рамка або фон блоку з вмістом.

Для установки полів або відступів в CSS від кожної сторони елемента існують такі властивості:

відступи:

• padding-top: значення;
• padding-right: значення;
• padding-bottom: значення;
• padding-left: значення;

поля:

• margin-top: значення;
• margin-right: значення;
• margin-bottom: значення;
• margin-left: значення;

Значення можуть бути вказані в будь-яких одиницях CSS - px, em,% і т. Д. Приклад: margin-top: 15px.

Також існує дуже зручна річ як скорочений запис margin і padding CSS. Якщо вам необхідно поставити поля або відступи для всіх чотирьох сторін елемента, зовсім необов'язково записувати властивість для кожної сторони окремо. Все робиться простіше: для margin і padding можна вказувати відразу 1, 2, 3 або 4 значення. Від кількості значень залежить, як розподіляються настройки:

• 4 значення: задаються відступи для всіх сторін елемента в такій послідовності: зверху, праворуч, знизу, зліва: padding: 2px 4px 5px 10px;
• 3 значення: задається відступ спочатку для верхнього боку, потім одночасно для лівого і правого, а потім - для нижньої: padding: 3px 6px 9px;
• 2 значення: задаються відступи спочатку одночасно від верхньої і нижньої сторони, а потім - одночасно для лівого і правого: padding: 6px 12px;
• 1 значення: задаються однакові відступи для всіх сторін елемента: padding: 3px;

Ті ж правила стосуються і властивості margin CSS. Зверніть увагу на те, що для margin можна використовувати і негативні значення (наприклад, -3px), які іноді бувають дуже корисними.

схлопування margin

Уявіть ситуацію: два блокових елемента знаходяться один над одним і їм задані поля margin. Для верхнього блоку встановлено значення margin: 60px, а для нижнього - margin: 30px. Логічно було б припустити, що два межують поля двох елементів просто стикнуться і в підсумку проміжок між блоками буде дорівнює 90 пікселям.

Однак справи йдуть по-іншому. Насправді в такій ситуації виявляється ефект, який називають спаданням, коли з двох сусідніх полів елементів вибирається найбільший за розміром. У нашому прикладі підсумковий проміжок між елементами буде дорівнює 60 пікселям.

Відстань між блоками одно більшого із значень

Схлопування margin працює тільки для верхніх і нижніх полів елементів і не відноситься до полів з правого та лівого боків. Остаточна величина проміжку вираховується в різних ситуаціях по-різному:

• Коли обидва значення margin позитивні, підсумковий розмір поля буде дорівнює бóльшему значенням.
• Якщо одне із значень є негативним, то для обчислення розміру поля потрібно отримати суму значень. Наприклад, при значеннях 20px і -18px розмір поля буде дорівнює:
  20 + (-18) = 20 - 18 = 2 пікселя.
• Якщо обидва значення негативні, порівнюються модулі цих чисел і вибирається число, бóльшее по модулю (отже, менше з негативних чисел). Приклад: необхідно порівняти значення полів -6px і -8px. Модулі порівнюваних чисел рівні 6 і 8 відповідно. Звідси випливає, що 6 -8. Підсумковий розмір поля дорівнює -8 пікселів.
• У разі, коли значення вказані в різних одиницях CSS, вони приводяться до однієї, після чого порівнюються і вибирається бóльшее значення.
• Розмір margin для дочірніх елементів визначається ще цікавіше: якщо у нащадка поле margin більше, ніж у батька, то пріоритет віддається йому. У цьому випадку розміри верхнього і нижнього полів батька стануть такими, як задано у нащадка. При цьому відстані між батьком і нащадком не буде.

Сьогодні ми попрацюємо над розумінням різниці між HTML padding ( внутрішній відступ) І margin (зовнішній відступ) в CSS. Але спочатку розберемося з їх синтаксисом. Існує кілька способів написання цих властивостей: звичайний і скорочений:

Padding і Margin в CSS

Звичайну форму записи розглянутих властивостей простіше зрозуміти, тому що вона схожа на всі інші стильові записи:

Звичайна запис:

padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

З іншого боку, скорочений запис в CSS об'єднує в собі всі ці властивості в одну загальну властивість «padding«.

Короткий запис:

padding: 10px 20px 40px 10px;

У padding і margin є чотири значення: верхнє, праве, нижнє і ліве. У скороченій записи, показаної вище, так само задаються чотири значення, відокремлених один від одного пробілом. Перше з чотирьох значень відступ зверху, потім відступ справа, знизу (padding bottom HTML) і зліва:

padding: TOP RIGHT BOTTOM LEFT; (Padding: зверху справа знизу зліва)

Цей запис можна скоротити запис до трьох значень, якщо лівий і правий padding / margin однакові. Наприклад, якщо верхній відступ дорівнює 30px, лівий і правий по 10px, а нижній - 40px, то можна використовувати наступну форму запису:

padding: 30px 10px 40px;

Скорочуємо до двох значень!

Якщо верхній і нижній padding / margin однакові, а правий і лівий padding / margin теж однакові, то можна вказувати тільки два значення. У цьому прикладі ми маємо верхній і нижній відступи, які дорівнюють 10px, а лівий і правий відступи - по 20px. Наш CSS буде виглядати наступним чином:

padding: TOP / BOTTOM RIGHT / LEFT; (Padding: зверху / знизу праворуч / ліворуч) padding: 10px 20px;

Тільки одне значення!

Наша остання версіяскороченою записи для padding і margin HTML містить тільки одне значення. Цей запис можна використовувати, коли всі відступи ( зверху, знизу, праворуч і ліворуч) Мають одне і те ж значення. Якби ми хотіли, щоб всі сторони мали відступи по 20px, то CSS виглядав би наступним чином:

Коли який формат запису використовувати? Наприклад, якщо потрібно задати елементу тільки нижній відступ, я буду використовувати звичайну запис, так як потрібно застосувати властивість тільки до однієї сторони: padding-bottom: 30px;

Як працювати з PADDING і MARGIN

Між цими двома властивостями існує відчутна різниця. Padding використовується для завдання простору всередині контейнера HTML-елемента. Margin використовується для завдання простору навколо зовнішнього кордону елементів.

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

Також можна думати про padding як про наповнювачі в картонній коробці. Коли ви наповнюєте коробку пінопластом, ви утримуйте їм вміст на відстані від країв коробки. Padding в CSS робить те ж саме.

Тепер подумайте про margin як про невидимий силовому полі навколо вас. Силове поле захищає інші речі від вас. Повертаючись до прикладу з пальто і фарбою, якби я кинув в вас фарбу, і вона була б в змозі пройти через силове поле, то вона як і раніше покрила б тільки вас і ваше пальто.

PADDING і MARGIN на прикладі сайту

Розглянемо властивості на прикладах з елементами. Ми почнемо з абзацу (тега

), Потім додамо до нього колір фону і додамо відступ 30px з кожного боку.

Нижче зліва видно, що це абзац з padding 30px навколо нього. На зображенні справа я використовував інструменти Google Chrome, Щоб показати, де padding HTML починається / закінчується для цього елемента. Зелений колірна зображенні нижче - це padding, який розташований навколо контейнера. Темно-синій колір фону заповнює внутрішню область:

Тепер додамо margin абзацу. Я додам відступ зверху і знизу 30px, а також 20px зліва і справа. Нижче на зображенні зліва показано, як цей абзац змінився з margin. Фактична ширина зображення стала менше, тому що margin відштовхує від кордонів іншої HTML елемент. Справа видно, що помаранчевий колір - це margin навколо елемента. margin завжди знаходиться за межами padding і темно-синій фон не поширюється на область margin:

Якщо ви до цих пір плутаєтеся, як використовувати padding і margin HTML, то прийшов час експериментувати! Чим більше ви будете використовувати властивості CSS, і змінювати їх значення, тим краще зрозумієте, як вони працюють.

Переклад статті " CSS PADDING VS. MARGIN AND HOW TO USE THEM"Був підготовлений дружною командою проекту.

Добре погано

• Tutorial

Мета цієї статті не ускладнити прості речі, а акцентувати увагу на відомих стандартах, про які чомусь забувають. Важливо дотримуватися осмислену структуру у всіх аспектах верстки, і не менш важливо дотримуватися її в відступи. І одним з основних принципів верстки є гнучкість. А саме, можливість легко вносити будь-які зміни і нічого при цьому не зламати. поводженняз margin і padding грає дуже велику роль в цій справі.

Нижче перераховані принципи виконуються в середовищі позиціонування елементів на сторінці. В елементах декору теж виконуються. Але не так категорично.

Основні принципи:

1. Відступ задається останньому можливого елементу в будинку.
2. Відступи можна задавати для незалежних елементів (БЕМ блок).
3. У останнього елемента групи, відступ обнуляється (завжди).

Відступи йдуть від попереднього елемента до наступного.

margin (и) задаються від попереднього елемента до наступного, від першого до другого, зверху вниз, зліва направо.

Це значіт.что такі властивості як margin-left і margin-top не використовуються(Не без винятків). З padding все трохи навпаки (крім того, що він використовується для, декоративних цілей, збільшення області посилання і т.д.). Коли блоку потрібен відступ зверху або зліва, він його отримує за рахунок padding-top і padding-left батька.

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

Відступ задається останньому можливого елементу в будинку

margin (и) задає тільки між сусідніми елементами будинок дерева.

У прикладі 3 списку, в такою структурою:

• Далеко-далеко, за словесними.

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

У цій сітуаціі.main-section__item і є останнім можливим, кому можна задати відступ, щоб розділити списки. Такого ж ефекту можна домогтися, якщо ви хочете зробити відступ диву, списку, лишку, засланні, але це буде не правильно.

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

headline in a section of seven words

Якщо взяти приклад з заголовком, і потрібно зробити відступ для заголовка зверху. то останній елементом буде section і для нього задається padding-top, margin (и) які стоять по дефолту завжди потрібно обнуляти.

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

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

Відступи можна задавати для незалежних елементів (БЕМ блок)

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

Якщо потрібно зробити блоку відступ. Без шкоди це робиться за допомогою:

• Спадкування через елемент (якщо витягнути цей блок з елемента, відступу не буде, і його можна буде просто розмістити в іншому місці).
• Додавання класу (можна зробити блок елементом).
• Обгортка (як блок, у якого роль, тільки в позиціонуванні).

.block__item> .block (margin-right: 10px;) .block.block__item (margin-right: 10px;) .block-wrap> .block (margin-right: 10px;)

У останнього елемента групи, відступ обнуляється (завжди)

Візьмемо для прикладу список і зображення.

це горизонтальне менюі логотип (який чомусь справа).

Для останньої li відступ обнуляється. І відступ робиться між сусідніми елементами ul і img. Про що йшлося у другому принципі.

Візьмемо інший приклад:

...

10.10.10

Цікавить нас відступ між новинами, які задается.blog-preview__item (margin-bottom: 20px;). Останній margin обнуляється, а нижній відступ робиться за рахунок padding blog-preview. Про що йшлося у другому принципі.

Частіше ніж інші псевдокласи, треба використовувати: last-child.

Item: not (: last-child) (margin-bottom: 20px;) // або // .item (// інші стилі // margin-bottom: 20px; &: last-child (margin-bottom: 0;) ) // або margin-top, основна ідея тут, не в напрямку Маргинем, а у відсутності зайвого // .item + .item (margin-top: 20px;) // або // .item (// інші стилі // & + & (margin-top: 20px;))

винятки

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

P. S.Раджу ознайомитися з публікацією

джерело: Margin or padding?
Philipp Sporrer.
Переклад: vl49.

Коли з метою форматування краще використовувати поля, а коли внутрішні відступи, і чи має це якесь значення?

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

Для наочності давайте звернемося до типової ситуації, яка, швидше за все, добре знайома кожному розробнику призначеного для користувача інтерфейсу в 2017 році. Маємо найпростіший картковий шаблон.

В даному прикладі можна виділити два типи інтервалів:

між картками (блакитні);

між картками та їх контейнером (зелені);

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

Реалізація прикладу за допомогою CSS?

Існує в буквальному сенсі тисячі способів створення такого шаблону за допомогою полів і внутрішніх відступів, але мені хотілося б представити вашій увазі один з них, який демонструє коректне використання властивостей margin і padding. Більш того, цей метод дозволяє додавати інші картки в подальшому.

Container (
padding: 16px;
}
.card + .card (
margin: 0 0 0 8px;
}

Всього-на-всього 2 селектора і 2 правила.

Яку ж функцію виконує знак плюса?

символ + Являє собою суміжний селектор. Він вказує тільки на той елемент, який слід безпосередньо за елементом, зазначеним перед цим селектором.

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

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

Все працює чудово до тих пір, поки нам не знадобитися розмістити поруч з картками що-небудь інше, відмінне від картки. Ну, скажімо, кнопку «Додати картку» ("Add card"):

Судячи з уже наявного фрагменту CSS коду ми, швидше за все, не стали б присвоювати новому представляє кнопку елементу класс.card, оскільки він карткою не є. Як же бути? Чи варто заради цього створювати додаткове ім'я класса.add-card, яке містить теж правило з властивістю margin, що і класс.card? Ні, є більш відповідне рішення.

Лоботомірованная сова * + *.

А що, схоже. Незважаючи на забавну асоціацію, цей метод чудово працює, і я його постійно використовую з тих пір як дізнався про його існування. Отже, до чого це все? Ось погляньте на відповідний CSS код:

Container (
padding: 16px;
}
/ * Ну що, дізналися Совушки лоботомізірованную? 😜 * /
.container> * + * (
margin: 0 0 0 8px;
}

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

В підсумку.

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

Як підсумок я хотів би представити на ваш розгляд pen-проект, який демонструє наведені вище приклади, а також перевірені на власному досвіді два правила. Отже, використовуємо:

padding- для проміжків між контейнером і його контентом.

margin- для проміжків між які перебувають всередині контейнера елементами.

19 відповідей

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

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

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

Таким чином, ви отримаєте вміст першого елемента, за яким слід заповнення першого елемента, а потім доповнення другого, а потім вміст другого елементу.

Таким чином, вміст цих двох елементів в кінцевому підсумку буде 2em на 2 елемента.

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

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

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

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

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

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

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

MARGIN vs PADDING:

Маржа використовується в елементі для створення відстані між цим елементом і іншими елементами сторінки. Якщо відступи використовуються для створення відстані між вмістом і кордоном елемента.

Маржа не є частиною елемента, де додаток є частиною елемента.

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

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

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

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

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

Що стосується полів, то вам не потрібно турбуватися про ширині елемента.

Як і коли ви даєте щось (padding: 10px;), вам потрібно зменшити ширину елемента 20px, щоб зберегти " fit"І не порушувати інші елементи навколо нього.

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

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

Ось кілька 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;)

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

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

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

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

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

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

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

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

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

Це властивість може мати від одного до чотирьох значень.

На зображенні світло-сірим кольором позначено зона за яку відповідає властивість padding:

1. при вказівці чотирьох значень(5px 10px 15px 20px) - порядок розстановки внутрішніх відступів буде наступний: Top(5px) - Right(10px) - Bottom(15px) - Left(20px). Для запам'ятовування порядку розстановки внутрішніх відступів в одному оголошенні можна використовувати англійське слово TR ou BL e (де T- top, R- right, B- bottom, L- left).


2. при вказівці трьох значень(5px 10px 15px) - порядок розстановки внутрішніх відступів буде наступний: Top(5px) - Right & Left(10px) - Bottom(15px).


3. при вказівці двох значень(5px 10px) - перше значення (5px) буде задавати розмір внутрішнього відступу від верху і від низу вмісту елемента, друге (10px) значення - внутрішні відступи зліва і справа вмісту елемента.


4. при вказівці одного значення(5px) - внутрішній відступ з усіх боків буде одного розміру - 5px.

підтримка браузерами

властивість			Opera		IExplorer	Edge
padding	1.0	1.0	3.5	1.0	4.0	12.0

CSS синтаксис:

padding: "length | initial | inherit";

JavaScript синтаксис:

Object.style.padding = "5px"

значення властивості

версія CSS

CSS1

успадковується

Ні.

Аніміруемое

Так.

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