1.2. Поля.

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

Атрибути: margin-top, margin-right, margin-bottom, margin-left.

Ці атрибути визначають величину полів навколо блоку:

• margin-top – задає ширину верхнього поля;

• margin-right – задає ширину правого поля;

• margin-bottom – задає ширину нижнього поля;

• margin-left – задає ширину лівого поля.

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

Розберемо способи завдання полів на прикладі всієї Web-сторінки. За замовчуванням в будь-якому браузері вони мають певне ненульове значення. Коли верстали сторінки за допомогою таблиць, навколо таблиці були присутні білі поля. Щоб їх усунути за допомогою CSS, слід записати таке правило:

BODY { margin-top: 0рх; margin-right: 0px; margin-bottom:0px; margin-left:0px; }

Якщо для сторінки потрібно встановити поля по 10% від ширини сторінки праворуч і ліворуч, а поля зверху і знизу не потрібні, то правило буде виглядати так:

BODY { margin-top: 0px; margin-right: 10%; margin-bottom: 0px; margin-left: 10%; }

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

P { margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; }

Всі поля для цього абзацу будуть обчислені автоматично.

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

Властивість margin

Використовується для короткої записи значень властивостей margin-top, margin-right, margin-bottom і margin-left. Властивість margin може мати одне, два, три або чотири значення. Якщо задано тільки одне значення, це означає, що величини полів з ​​усіх боків однакові:

P { margin: 1em }

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

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

DIV { margin: 10рх 5px }

У даному прикладі для контейнерів div будуть встановлені поля по 10 пікселів зверху і знизу, і по 5 пікселів зліва і справа. Якщо задано три значення, то перше застосовується до верхнього поля, друге – до лівого і правого, а третє – до нижнього.

BODY { margin: 0px 15px 5рх }

У цьому прикладі сторінка не має верхнього поля, ліворуч і праворуч поля однакові-по 15 пікселів, поле знизу одно 5 пікселів.

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

P { margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; margin-left: 1em; } еквивалентен правилу: P { margin: 0.5em 0.5em 0.5em 1em }

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

У HTML є деякий аналог цих властивостей CSS. Це атрибути bottoramargin, top-margin, leftmargin і rightmargin. Застосовувати їх можна тільки в елементі BODY для регулювання розмірів полів сторінки. За допомогою властивостей CSS можна регулювати поля будь-яких елементів, якщо, звичайно, це підтримується браузерами. Для всіх елементів блочного рівня поля margin підтримуються без проблем, трохи гірше справа йде з рядковими елементами.