Відстань margin та padding вказуються у. Поля та відступи CSS: відмінності властивостей margin та padding. Відступ задається останньому можливому елементу в будинку

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

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 */
}

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

Джерело: Margin або 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— для проміжків між елементами, що знаходяться всередині контейнера.

Post переглядів: 427

Опис

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

Властивість padding дозволяє встановити величину поля відразу для всіх сторін елемента або визначити її тільки для зазначених сторін.

Синтаксис

padding: [значення | відсотки] (1, 4) | inherit

Значення

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

Величину полів можна вказувати у пікселах (px), відсотках (%) або інших допустимих для CSS одиницях. Значення inherit показує, що воно успадковується у батька. При вказівці поля у відсотках значення вважається від ширини батька елемента.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Рис. 2. Застосування якості padding

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

document.getElementById("elementID ").style.padding

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

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

Завдання: на сторінці потрібен блок червоного кольору(200х200 пікселів), який відступає від країв браузеразверху та зліва на 40 та 70 пікселів відповідно, та текст всередині якого відступає зліва та зверхуна 40 пікселів.

Рішення: дивимося на малюнок та на код. Наш блок червоного кольору не повинен перевищувати 200 на 200 пікселів і повинен мати відступ від країв браузера (або інших блоків контенту). Власне ці відступи ми робимо через margin. Якщо ми робимо padding, то відступ відбувається всередині нашого червоного блоку і відступи виходять із тлом самого блоку (тобто червоні).

Крім використаних властивостей (рядки 6-9) є ще властивості margin-right, padding-right, margin-bottom, padding-bottom – вони для відступів праворуч і знизу відповідно. Значення всіх цих властивостей можуть бути в пікселях (px), відсотках (%), або одиницях em.

В принципі, ось воно і все. Проте є деякі особливості роботи з ними.

Особливості margin та padding

При використанні padding, розміри padding"а повинні відніматися з висоти та ширини блоку, інакше розмір блоку збільшиться на розмір padding"а.

Якщо якомусь блоку задати margin-left і margin-right зі значеннями auto, то якщо блок має фіксовану ширину (наприклад 400px) і немає CSS-свісту float, то цей блок буде вирівняний по центру елемента, в якому він знаходиться. Власне для негумової верстки з вирівнюванням центром цей спосіб вирівнювання зазвичай і використовується. Незважаючи на те, що IE 5.5 і молодше значення auto не підтримують, це все одно не заважає його постійно використовувати =).

Небажано використання padding та margin у таблицях, тому що ефект буде непередбачуваним у різних браузерах.

І останнє, що я хотів сказати. Не забувайте використовувати скорочені конструкції запису, наприклад margin: 10px 0 5px 20px; Якщо відступ нульовий, то можна ставити просто нулик, без вказівки параметрів. Запам'ятати який із параметрів до якого кордону належить дуже просто - для блоку відступи йдуть за годинниковою стрілкою: перше число - зверху, друге - праворуч, третє - знизу, четверте - ліворуч.

Ось, власне, і все, що я хотів розповісти сьогодні. Усім щасливі вихідні!

Властивість 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. Отступ объекта внутри объекта