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

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

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

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

Рис. 9.2.

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

<DIV STYLE="width:200px;"> пікселі </ DIV>

<DIV STYLE="width:200pt;"> типографські пункти

</ DIV>

<DIV STYLE="width:5em;"> умовні одиниці </ DIV>

Рис. 9.3.

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

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

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

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

Рис. 9.4.

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

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

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

Притиснемо блок тексту праворуч. Ліворуч його буде обтікати інший текст.

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

CSS дозволяє вирівнювати блок тексту не тільки по краю сторінки, але і по центру (тільки в Netscape Navigator).

Отцентруємо блок тексту.

Блок розміщений по центру сторінки , якщо сторінка проглядається в Netscape Navigator. CSS не підтримує значення center для атрибута float.

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