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