Властивість HTML margin використовується для додавання відступу або розриву між різними елементами. Властивість padding використовується для додавання простору між вмістом і кордоном (рамкою) зазначеного HTML-елемента.
Різницю між полем і відступом можна побачити на наступному малюнку:
Подивитися демо-версію і код
У нас є три елементи div. Перші два - з властивістю HTML margin. а третій - з властивістю padding. Відстань між елементами div - це margin. а простір між текстом всередині третього елемента div і лінією його межі - це padding.
Синтаксис CSS padding і margin
де:- 10px - відступ зверху;
- 20px - відступ справа;
- 30px - відступ знизу;
- 40px - відступ зліва.
Також можна встановити margin left HTML і інші напрямки окремо:
Примітка: Можна використовувати для визначення відступу px. pts. cm і т.д.
Синтаксис властивості CSS padding
Якщо вказані чотири значення, то порядок їх слідування такій же, як і для властивості HTML CSS margin.
Для кожного напряму окремо:
Приклад для установки полів і відступів в HTML-списку
Список задається і іншими властивостями CSS. але без використання властивостей HTML margin і padding він буде виглядати так:
Подивитися демо-версію і код
Додавши поля 10px для посилань усередині
- :
ми отримаємо такий вигляд:
Подивитися онлайн демо-версію і код
Властивість padding додало простір між вмістом і кордоном кожного посилання. Вкажіть відступ величиною в 2 пікселя в класі посилання, і отримаєте такий вигляд:
Подивитися онлайн демо-версію і код
Весь клас для посилань всередині елемента
- буде наступним:
Демонстрація полів на прикладі HTML-таблиці
Нижче наводиться приклад використання властивості padding в HTML-таблиці. Я створив таблицю з кількома рядками.
Для таблиці задані стилі за допомогою різних властивостей CSS. Спочатку подивіться, як виглядає таблиця без застосування властивості padding:
Подивитися демо-версію і код
Додавши поля, ми отримаємо таблицю, яка буде виглядати наступним чином:
Подивитися демо-версію і код
Нижче наводиться код стилів, які використовуються для
Приклад використання полів і відступів з елементом form
Властивості margin padding HTML також можна застосовувати для елементів форми: текстових полів, кнопок і т.д.
Властивість padding. застосоване до текстового поля, задає простір між курсором всередині текстового поля і його кордоном. margin додає відступи між різними текстовими полями або іншими елементами форми.
Щоб стало зрозуміліше, я створю форму і покажу різницю між полями з використанням властивостей margin і padding і без. Первинний зовнішній вигляд форми без застосування властивостей margin і padding:
Додавши поля до класу текстових полів і класу кнопки btn. ми отримаємо форму, виглядають наступним чином:
Поля для текстових полів:
Поля для кнопки:
Подивитися демо-версію і код
Щоб збільшити або зменшити відступи між текстовими полями, використовуйте властивість HTML CSS margin. У даній демо-версії я використав від'ємне значення для зменшення відстані між полями.
Поля форми будуть виглядати наступним чином:
Подивитися демо-версію і код
Після використання від'ємного значення в HTML margin відстань між текстовими полями зменшилася на 3 пікселі.
Використавши властивість padding. ми збільшили відстань між курсором всередині текстового поля і лінією кордону, яке задається іншими властивостями. Тепер поле виглядає набагато краще.
Для кнопки "Save" ми також застосували властивість padding:
яке використовується для вирівнювання тексту в усіх напрямках.
Переклад статті «CSS padding and margin - Explained with 4 HTML elements» був підготовлений дружною командою проекту Сайтобудування від А до Я.