CSS пропонує веб-розробнику колосальні можливості для оформлення HTML-сторінок. Новачкові вони здадуться складними, але якщо ретельно і методично в них розбиратися, технологія таблиць стилів скориться, верстка сайтів перестане приносити труднощі. Одна з незамінних властивостей CSS
– padding . Використовується воно, щоб задати поля блоків HTML-сторінок.
Що таке блоки?
Сайт будується з цеглинок – блоків. При цьому кожен елемент, незалежно від його вмісту, повинен мати прямокутну форму. Тобто всі зображення і написи подумки полягають розробником в «коробочки», маючи які, він створює веб-сторінку.
Найчастіше блоки задаються тегами ,
–
, . До кожного такого елемента застосовують властивості CSS: padding , margin , border , width та інші. Ширина прямокутника-блоку задається властивістю width потім кожен елемент оформляється полями, які окреслюються за допомогою атрибута border. Нарешті, компонент сторінки може мати зовнішні поля, або відступи – margin , що відділяють його від іншого блоку.
Синтаксис властивості padding в CSS
Творці каскадних таблиць стилів передбачили кілька варіантів запису атрибута для встановлення полів. Зробити порожню область всередині блоку можна вісьмома різними способами! Таблиця нижче показує приклади для кожного варіанта і дає до них короткі пояснення.
Приклад використання
Пояснення
padding: 15 px;
Якщо після атрибута слід одне число, це означає, що елемент буде мати однакові поля з усіх сторін. Запис px припускає, що значення задається в пікселях. Тобто в підсумку блок буде мати поля по 15 пікселів.
padding: 18 px 36 px;
Перше з двох чисел вказує, що вертикальні поля складуть 18 пікселів, бічні – в два рази більше – 36 пікселів.
padding: 6 px 12 px 18 px;
Середнє число – значення полів з боків (лівого і правого), два інших – вертикальні поля. При цьому перше число (6 px) відноситься до верхнього поля, а останнє (18 px) – до нижнього.
padding: 6 px 12 px 18 px 36 px;
Форма запису властивості CSS padding , в якій присутні чотири числа, дозволяє задати поля з усіх боків блоку. Числові значення послідовно застосовуються до верхнього поля і далі за годинниковою стрілкою – до правого, нижнього і лівого.
padding-left: 14 px;
Приписка left говорить сама за себе – поле буде встановлено тільки зліва елемента.
padding-right: 14 px;
Аналогічно попередньому варіанту запису – поле створиться тільки праворуч блоку.
padding-top: 14 px;
Запис визначає поле зверху.
padding-bottom: 14 px;
Запис визначає поле знизу.
Слід зауважити, що за замовчуванням в CSS padding дорівнює нулю. Даний атрибут не є наслідуваним, тобто його необхідно встановлювати для кожного блоку. Крім звичних і зрозумілих пікселів, ширина порожнього простору навколо блоків задається і у відносних одиницях. Наприклад, у прикладах вище можна записати 5% – у результаті ширина поля обрахується браузером автоматично.
Як використовувати властивість?
Отже, форми запису атрибута розглянуті, але як його використовувати на HTML-сторінці? Перший варіант – «красивий», коли все, що стосується технології CSS, не прописується в HTML, а винесено в окремий файл з відповідним розширенням.
Другий варіант – запис безпосередньо в тег . CSS padding в цьому випадку задається наступним чином: Як записати атрибут – вибирає верстальник. У будь-якому випадку необхідно володіти всіма способами застосування властивості для визначення полів, щоб при нагоді скористатися ним.