Блочный элемент <h2> занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками
Блочный элемент <p> начинается с новой строки, а встроенный элемент <em> не начинается с новой строки, а остается в составе абзаца
Блочные и встроенные элементы
Очевидно вы уже заметили, что элементы заголовков <h1> - <h6> и абзацев <p> начинаются с новой строки. Это происходит потому, что они являются примерами блочных элементов различных уровней. Браузеры рассматривают блочные элементы так, словно они заключены в маленькие прямоугольные области – блоки, из которых складываются страницы. По умолчанию каждый блочный элемент начинается с новой строки и, как правило, ограничен сверху и снизу пустыми строками.
В следующем примере границы блочных элементов выделены зеленым цветом:
Пример: Блочные и встроенные элементы
Обратите внимание как выглядит текст, который мы пометили как курсивный (еm). Он не начинается с новой строки, а остается в составе абзаца. Это происходит потому, что элемент <em> является встроенным или строчным. Встроенные элементы не начинаются с новой строки, а находятся в составе блочных. Встроенным элементам достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в них.
Разница между блочными и строчными элементами следующая:
- Строчные элементы не могут хранить блочные элементы, а могут содержать только данные или другие строчные элементы.
- Блочные элементы могут содержать другие блочные элементы, строчные элементы, а также данные.
- Блочные элементы всегда начинаются с новой строки и, как правило, ограничены сверху и снизу пустыми строками.
- Блочные элементы занимают всю ширину родительского элемента, например, окна браузера.
- Строчные элементы занимают ширину равную их содержимому плюс значения отступов, полей и границ.
Примеры блочных элементов:
- <div>
- <h1> - <h6>
- <p>
- <form>
Примеры строчных элементов:
- <span>
- <a>
- <img>
Общие элементы <div> и <span>
Элемент <div> — это общий блочный элемент, который применяется для группировки одного или нескольких блочных элементов. Он указывает, что сгруппированные вместе элементы образуют некую смысловую единицу и должны рассматриваться, например таблицей стилей CSS, как одна единица. Используя элемент <div> вместе с таблицами стилей CSS, вы сможете придать одинаковое стилевое оформление для всех элементов, помещенных в контейнер <div>.
Итак, тег <div> служит для того, чтобы:
– применять какие-либо настройки к отдельному информационному блоку на сайте;
– быть контейнером для текста, изображений и других элементов HTML-документа.
Элемент <span> — это общий встроенный элемент, который используется для встроенных элементов, которые не вводят переводов строк. Элемент <span> может содержать только текст и другие встроенные элементы (вы не можете поместить туда блочные элементы: заголовки, списки, элементы группировки контента и т. д.).
Так как элемент <span> — строчный, то есть не требует для себя всей ширины окна браузера, то ему достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем. Поэтому элемент <span> часто используется для форматирования отдельных слов внутри абзаца.
Пример использование элемента <span>:
Пример: Общие элементы div и span.
Элементspan может применяться для форматирования отдельных слов внутри абзаца
Элемент
div
НЕ может применяться для форматирования отдельных слов внутри абзаца