Типы элементов и свойство display

За исключением частей html, body, и table, каждый элемент в Рекомендациях HTML 4.01, который связан с основным контентом, имеет соответствующий строковый или блочный тип. Каждый тип определяет поведение компоновки по умолчанию различным образом:

• строковый

  • Текст и изображения, которые непосредственно следуют за и/или предшествуют строковым элементам, изображаются на общей базовой линии с контентом строкового элемента, в зависимости от элемент(ов), в которые помещены сами эти элементы.

  • свойства margin, width, height, и float в правилах таблиц стилей, применимых к этим элементам (за исключением img и object), игнорируются.

  • Строки текста в строковых элементах размещаются с мягкими разрывами строк, как требуется (или допускается) шириной содержащего их блочного элемента, за исключением, когда это поведение модифицируется использованием свойства white-space.

  • Эти элементы могут содержать только текст или другие строковые элементы.

• блочный

  • Эти элементы представляются как дискретные блоки в своих контейнерах.

  • Если только float не присвоено значение left или right, всегда будет выводиться с предшествующим и последующим разрывом строки.

  • Разрывы строк между вложенными блочными элементами, которые не имеют между собой никакого контента, будут обычно сжиматься.

  • блочные элементы с шириной, заданной как auto (по умолчанию), всегда будут расширяться, чтобы заполнить всю доступную им ширину.

Свойство display имеет три обычно используемых значения — block, inline, и none — два из которых относятся к соответствующим типам элементов. Эффект изменения значения свойства display элемента состоит в том, что строковый элемент будет вести себя как блочный, или блочный элемент будет вести себя как строковый, или изменение представления документа, как если бы этот элемент (и весь его контент) не существовал бы вообще.

Очевидно, что жизненно важно знать, какие элементы соответствуют какому типу по умолчанию, отношения представлены кратко в таблице 30.2:

Таблица 30.2. Часто используемые элементы HTML и их типы
Элемент	Тип	Подтип	Примечание
a	строковый	специальный
abbr	строковый	фразовый
acronym	строковый	фразовый
address	блочный		Ведет себя аналогично p в обычной практике
blockquote	строковый		Должен содержать по крайней мере один блочный элемент, когда объявленный !DOCTYPE будет Strict
body			Охватывает весь холст документа; обычно с учетом поля (в IE, Firefox, и Safari) или заполнения (в Opera) в 10px в среде screen
cite	строковый	фразовый
div	блочный
em	строковый	фразовый
fieldset	блочный		Обычно выводится по умолчанию с border: 1px black;
form	блочный
h1 … h6	блочный	заголовок
input	строковый	управление формой
img	строковый	специальный
label	строковый	управление формой
li	блочный		Тип элемента не определенный в Определении Типа Документа, но этот элемент может содержать блочные или строковые элементы; Рекомендация CSS 2.1 не рассматривают значение display для позиций списка
ol	блочный	список
p	блочный		Может содержать только строковые элементы; обычно выводится с верхним и нижним полями
span	строковый	специальный
strong	строковый	фразовый
table	блочный
ul	блочный	список

Только поля между двумя смежными блочными элементами одного подтипа будут сжиматься.