Очевидно вы уже заметили, что элементы заголовков -
и абзацев
начинаются с новой строки. Это происходит потому, что они являются примерами блочных элементов различных уровней. Браузеры рассматривают блочные элементы так, словно они заключены в маленькие прямоугольные области – блоки, из которых складываются страницы. По умолчанию каждый блочный элемент начинается с новой строки и, как правило, ограничен сверху и снизу пустыми строками.
В следующем примере границы блочных элементов выделены зеленым цветом:
Пример: Блочные и встроенные элементы
- Попробуй сам »
Блочный элемент занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками
Блочный элемент
Начинается с новой строки, а встроенный элемент
Блочный элемент (h2) занимает всю ширину родительского элемента
и ограничен сверху и снизу пустыми строками
Блочный элемент (p) начинается с новой строки,
а встроенный элемент (em)
не начинается с новой строки, а остается в составе абзаца
Обратите внимание как выглядит текст, который мы пометили как курсивный (еm). Он не начинается с новой строки, а остается в составе абзаца. Это происходит потому, что элемент является встроенным или строчным. Встроенные элементы не начинаются с новой строки, а находятся в составе блочных. Встроенным элементам достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в них.
Разница между блочными и строчными элементами следующая:
- Строчные элементы не могут хранить блочные элементы, а могут содержать только данные или другие строчные элементы.
- Блочные элементы могут содержать другие блочные элементы, строчные элементы, а также данные.
- Блочные элементы всегда начинаются с новой строки и, как правило, ограничены сверху и снизу пустыми строками.
- Блочные элементы занимают всю ширину родительского элемента, например, окна браузера.
- Строчные элементы занимают ширину равную их содержимому плюс значения отступов, полей и границ.
Примеры блочных элементов:
-
Примеры строчных элементов:
Общие элементы
иЭлемент
— это общий блочный элемент, который применяется для группировки одного или нескольких блочных элементов. Он указывает, что сгруппированные вместе элементы образуют некую смысловую единицу и должны рассматриваться, например таблицей стилей CSS, как одна единица. Используя элементвместе с таблицами стилей CSS, вы сможете придать одинаковое стилевое оформление для всех элементов, помещенных в контейнер.Итак, тег
служит для того, чтобы:
– применять какие-либо настройки к отдельному информационному блоку на сайте;
– быть контейнером для текста, изображений и других элементов HTML-документа.Элемент — это общий встроенный элемент, который используется для встроенных элементов, которые не вводят переводов строк. Элемент может содержать только текст и другие встроенные элементы (вы не можете поместить туда блочные элементы: заголовки, списки, элементы группировки контента и т. д.).
Так как элемент — строчный , то есть не требует для себя всей ширины окна браузера, то ему достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем. Поэтому элемент часто используется для форматирования отдельных слов внутри абзаца.HTML (Hypertext Markup Language ) elements historically were categorized as either "block-level" elements or "inline" elements . By default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.
Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The following example demonstrates the block-level element"s influence:
Block-level elements
HTML
This paragraph is a block-level element; its background has been colored to display the paragraph"s parent element.
CSS
p { background-color: #8ABB55; }Usage
- Block-level elements may appear only within a element.
Block-level vs. inline
There are a couple of key differences between block-level elements and inline elements:
Content model Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. Default formatting By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
Elements
The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).
Contact information. Article content. element represents a portion of a document whose content is only indirectly related to the document" s main content.> Aside content. Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the element.">
Long ("block") quotation.
Disclosure widget. element represents a dialog box or other interactive component, such as an inspector or window.">