3.6 KiB
| title | localeTitle |
|---|---|
| Block and Inline Elements | Блочные и строчные элементы |
Блочные и строчные элементы
Поясним их, используя приведенные ниже примеры:
Образец кода с выводом:
Блочный элемент:
Блочные элементы занимают всю ширину своего родителя (контейнера), например <div> и <p> в примере.
Обратите внимание, что оба <div> и <p> начинаются с новой строки каждый раз, образуя блокоподобную структуру. Блочные элементы начинаются на новых строках.
Общими блочными элементами являются <div> , <p> , <article> , <section> , <figure> , <footer> и т. Д.
Строчный элемент:
Inline, поскольку название говорит, «включено как часть основного текста, а не как отдельный раздел». Строчные элементы занимают ширину, определяемую размером содержимого, по мере необходимости. В отличие от блочных элементов, они не начинаются на новых строках.
Некоторые из строчных элементов : <a> , <span> , <img> , <code> , <cite> , <button> , <input> и т. д.
Образец кода с выводом:
Примечание . Блочные элементы могут содержать другие блочные или строчные элементы. Строчные элементы не могут содержать блочные элементы.
Изменения в HTML5
Хотя понимание блочных и строчных элементов по-прежнему актуально, вы должны знать, что эти термины были определены в предыдущих версиях спецификации HTML. В HTML5 более сложный набор «категорий контента» заменяет блочные и строчные элементы. Категория «строчных» элементов примерно соответствует категории фразового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента. Дополнительные сведения о новых категориях контента в HTML5, включая содержимое потока и содержание фраз, см. На странице «Категории контента» в Mozilla Developer Network.
Дополнительная информация:
Пожалуйста, обращайтесь к Mozilla Docs