На самом простом уровне существуют два варианта отображения элемента: блочный и строчный. Блочные элементы влияют на весь раздел содержимого. Элемент абзаца <p> — блочный: он определяет и отделяет текстовый блок. Элементы заголовков, такие как <h1> — <h6>, и элемент адреса <address> тоже блочные. Визуально блочные элементы всегда отображают содержимое на отдельных строках, другими словами, вставляют перевод строки. 

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

Нужно упомянуть еще несколько важных моментов:

1. Строчные элементы всегда должны использоваться внутри блочных. Например, нельзя использовать элемент цитаты <q> сам по себе для оформления предложения. Вместо этого он обычно размещается внутри элемента абзаца, который предоставляет больше информации:

<p><q>Once more unto the breach, dear friends</q>, wrote Shakespeare.</p>

2. Хотя имеются исключения, можно взять за правило для простой разметки текста не вкладывать блочные элементы в другие блочные элементы. Тогда как строчные элементы внутри блочных — это совершенно нормально:

<h1>The <em>Destiny</em> Corporation</h1>

Следующая запись не имеет смысла:

<p>This is a typical, and wrong-headed, attempt to make
text <h1>bigger</h1> in a paragraph</p>

Вот еще один вариант неправильной записи:

<p><h1>Is this content a heading, or a paragraph? It can’t be both, but that’s exactly what the markup surrounding it says.</h1></p>

3. Свойство отображения элемента можно изменить в коде CSS: т. е., блочный по умолчанию элемент можно отобразить строчно и наоборот. Однако, такая возможность не меняет правил выше, которым по-прежнему нужно следовать.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование единиц измерения CSS Q
• Использование истинных цветов при печати веб-страниц
• Использование расположений CSS: значение «фиксированное»