Публікації блогу Міки > Рубрика: Для Сайту - моя бібліотека > "Блочні та рядкові елементи"


Блочні та рядкові елементи


12 Липень 2011 00:16:58


Блочний елемент (елемент рівня блоку, block-level element)

Категорія елементів, які можуть знаходитись всередині <body> і задовольняють наступним критеріям:

Модель вмісту - можуть містити текст, рядкові та блочні елементи.

Форматування - за умовчанням блочні елементи, як правило, починаються з нового рядка. Після елементу також додається перенесення рядка.

Напрямок тексту - успадковує значення атрибуту dir.

За замовчуванням блочний елемент займає всю ширину батьківського контейнера.

До блочних елементів відносяться (по специфікації HTML 4.01):

address, blockquote, div, dl, fieldset, form, hr, h1, h2, h3, h4, h5, h6, noscript, ol, p, pre, table, ul.

Теги <del> та <ins> можуть виступати в ролі блочних або рядкових, в залежності від контенту.

Кожен рядковий елемент теж може стати блочним, якщо йому задати властивість display: block; або зробити його плаваючим (float: left / float: right).


Рядковий елемент (елемент рівня тексту, inline element, text level element)

Категорія елементів, які можуть знаходитись всередині тегу <body> тільки будучи вкладеними в блочний елемент та відповідають наступним критеріям:

Модель вмісту - можуть містити тексти та рядкові елементи.

Форматування - за умовчанням йдуть в тексті підряд, без розриву і перенесення рядка.

Напрямок тексту - не успадковують значення атрибута dir.

За замовчуванням ширина рядкового елемента дорівнює ширині його вмісту.

Для рядкових елементів не діють деякі властивості CSS, призначені для блочних елементів (наприклад margin-top, margin-bottom).

До рядкових елементів відносяться (по специфікації HTML 4.01):

текст, a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.

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



Якорі:

<a name="block"></a> - http://blog.mika.biz.ua/view_post.php?idp=152#block

<a name="ryad"></a> - http://blog.mika.biz.ua/view_post.php?idp=152#ryad


Автор: Міка
Кількість переглядів: 2971

Рейтинг: Рейтинг
Ваша оцінка:
1
2
3
4
5






Коментарів ще нема

  • X
    Ваше ім'я:

    Ваш E-mail:
    Ваш коментар:

    Ми хочемо знати, що Ви не робот. Будь ласка введіть суму цифрами:
    Сімсот Сімдесять Сім