Блок HTML и встроенные элементы
Каждый элемент HTML имеет отображаемое значение по умолчанию, в зависимости от типа элемента.
Есть два отображаемых значения: блочное и встроенное.
Элементы уровня блока
Элемент блочного уровня всегда начинается с новой строки.
Блочный элемент всегда занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).
У блочного элемента есть верхнее и нижнее поля, а у встроенного элемента их нет.
Пример
<div>Hello World</div>
Вот элементы блочного уровня в HTML:
Встроенные элементы
Встроенный элемент не начинается с новой строки.
Встроенный элемент занимает столько ширины, сколько необходимо.
Это элемент <span> внутри абзаца.
Пример
<span>Hello World</span>
Вот встроенные элементы в HTML:
Примечание. Встроенный элемент не может содержать элемент блочного уровня!
Элемент <div>
Элемент <div>часто используется в качестве контейнера для других элементов HTML.
Элемент <div>не имеет обязательных атрибутов, но style, classи idявляются общими.
При использовании вместе с CSS этот <div>элемент можно использовать для стилизации блоков контента:
Пример
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Элемент <span>
Элемент <span>представляет собой встроенный контейнер, используемый для разметки части текста или части документа.
Элемент <span>не имеет обязательных атрибутов, но style, classи idявляются общими.
При использовании вместе с CSS этот <span>элемент можно использовать для стилизации частей текста:
Пример
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Краткое содержание главы
- Есть два отображаемых значения: блочное и встроенное.
- Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину.
- Встроенный элемент не начинается с новой строки и занимает столько ширины, сколько необходимо.
- Элемент
<div>является блочным и часто используется в качестве контейнера для других элементов HTML. - Элемент
<span>представляет собой встроенный контейнер, используемый для разметки части текста или части документа.
HTML-теги
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .