Структуру блочных элементов (block element) мы рассмотрели ранее, см. урок 18

Блочный элемент занимает всю возможную ширину в родительском элементе и вставляет разрывы строки в своем начале и в своем конце.

Примеры блочных элементов: <div>, <h1>, <p> и т.д.

Встроенные элементы (инлайновые элементы, inline element) имеют такую же структуру, как и у блочных элементов, за исключением отсутствия у встроенных элементов верха и низа.

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

Примеры встроенных элементов: <span>, <a> и т.д.

Блочные элементы могут быть родителями по отношению к другим блочным элементам, встроенным элементам и могут содержать контент.

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

Иногда из-за соображений дизайна блочные элементы отображаются как встроенные, используя свойство display:
display:inline;

Можно также встроенные элементы отобразить как блочные:
display:block;

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



Теперь исследуем на практическом примере:
css_021_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_021_001.zip ← скачайте пример, чтобы установить на свой сайт...