Властивості блоків

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

Блок тексту має такі властивості:висоту (height), ширину (width), границі (border), відступ (margin), набивка (padding), довільне розміщення (float), керування обтіканням (clear).

Графічно властивості можна представити наступним чином:

Із шириною і висотою блоку тексту усе більш-менш зрозуміло. Задаватися вони можуть у типографських пунктах (pt), пікселях (px) і умовних одиницях (em):

З висотою блоку тексту варто бути обережним, тому що в четвертій версії Netscape Navigator багато які з атрибутів CSS не підтримуються, у тому числі висота звичайного блокового елемента.

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

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

У такий спосіб padding і margin характеризують відступи блокового елемента відносного початку його змісту і щодо границі його елемента, що охоплює, розмітки, відповідно (див рис).

Відступи і "набивки" можуть бути лівими, правими, верхніми і нижніми. CSS дозволяє змінювати будь-які з них. Більш докладно відступи розглядаються в розділі "Відступи"(margin)", а "набивка" у розділі "Набивка" (padding)".

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

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

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

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