Блочные и встроенные элементы

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

Пример: Блочные и встроенные элементы

Блочный элемент <h2> занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками

Блочный элемент <p> начинается с новой строки, а встроенный элемент <em> не начинается с новой строки, а остается в составе абзаца

Обратите внимание как выглядит текст, который мы пометили как курсивный (е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
НЕ может применяться для форматирования отдельных слов внутри абзаца






Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌