Блочна верстка Тег і тег

Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
    dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.

Результат даного прикладу показаний на рис. 1.

Рис. 1. Вид блоків, оформлених за допомогою стилів

CSS

display

коротка інформація

Значення за замовчуванням	inline
Успадковується	Немає
Застосовується	До всіх елементів
Посилання на специфікацію	http://www.w3.org/TR/CSS21/visuren.html#display-prop

Версії CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Значення

Опис

block

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

inline

Елемент відображається як вбудований. Використання блокових тегів, таких як

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

inline-block

Це значення генерує блоковий елемент, який обтікається іншими елементами веб-сторінки подібно вбудованому елементу. Фактично такий елемент по своїй дії схожий на вбудовані елементи (начебто тега ). При цьому його внутрішня частина форматується як блоковий елемент, а сам елемент - як вбудований.

inline-table

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

list-item

Елемент виводиться як блоковий і додається маркер списку.

none

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

run-in

Встановлює елемент як блоковий або вбудований в залежності від контексту.

table

Визначає, що елемент є блокової таблицею подібно використанню тега .
.
.
.
.
).
.

table-caption

Задає заголовок таблиці подібно застосуванню тега
.

table-cell

Вказує, що елемент являє собою комірку таблиці(тег або ).

table-column

Призначає елемент колонкою таблиці, немов був доданий тег

table-column-group

Визначає, що елемент є групою однієї або більше колонок таблиці, як при використанні тега

table-footer-group

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

table-header-group

Елемент призначений для зберігання одного чи кількох рядків осередків, які представлені вгорі таблиці. По своїй дії схоже з роботою тега

table-row

Елемент відображається як рядок таблиці (тег

table-row-group

Створює структурний блок, що складається з декількох рядків таблиці аналогічно дії тега

Приклад

HTML5 CSS 2.1 IE Cr Op Sa Fx

class="exampleTitle">Пример

class="example"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
Формула серной кислоты: H2 SO4 
</body>
</html>