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

Теперь, когда мы подготовили весь необходимый инструментарий для анализа, приступим к изучению блочных и встроенных элементов.

Если вы посмотрите в свойства CSS всех элементов, у некоторых вы можете увидеть свойство display: block;, которое как раз и говорит браузеру, что элемент является блочным. Все блочные элементы начинаются с новой строки. Именно поэтому теги <h1> и <h2> находятся на разных строках (хотя могли бы уместиться на одной). Наведя курсор на любой блочный элемент, можно увидеть, что они занимают 100% доступной им ширины. Это их свойство по умолчанию, которое можно изменить. Однако даже сделав ширину тегов <h1> и <h2> такой, чтобы они могли уместиться на одной строке (например по 50%), они бы всё равно были в разных строках, т.к., повторюсь, все блочные элементы начинаются с новой строки.

Теперь посмотрим на теги <em>, <b> и <a>. У них в свойствах прописано display: inline;. Как вы видите, они не начинаются с новой строки. Некоторые из них в данном примере находятся в составе строк. А их ширина ровно такая, чтобы весь контент уместился, но не больше. Эти элементы называются встроенными. Встроенные элементы обычно используются в составе блочных.

Также есть другие типы отображения элементов, такие как table, table-cell, inline-block и т.д. Но о них мы поговорим в главе, посвящённой CSS. Единственное, что вам сейчас нужно знать, это то, что все элементы визуально представляют из себя блоки (не путайте с блочными элементами), и в зависимости от того, блочный это элемент или встроенный, зависит поведение элемента на странице.