css
Основы

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

CSS
Основы

Обновлено

06.08.2023

Просмотров

136

Время прочтения

30 мин.

Сложность

Блочные элементы

Все элементы HTML на веб странице глобально можно разделить на две группы в зависимости от их визуального отображения и поведения их блочной модели CSS. Блочные элементы, к которым относятся например section, main, div, p и другие, стремятся занять всю возможную ширину родительского контейнера. В связи с этим блочный элемент всегда начинает отображаться с новой строки, и следующий за блочным элемент также отображается с новой строки. Вертикальная маржа блочных элементов, как было рассказано в предыдущем уроке, схлопывается. Блочные элементы можно и нужно вкладывать друг в друга, в этом и заключается работа верстальщика — создать наиболее подходящую разметку для нужного отображения элементов. Единственное исключение — тег <p>, в него нельзя вкладывать блочные теги, а также другие параграфы. Если вы напишете такую разметку, браузер самостоятельно закроет ваш тег <p> перед началом блочного тега. Скорее всего после такого ваша вёрстка «поедет».

На скриншоте размер body уменьшен до 40vw для удобства представления. Вы видите, как блочный элемент div занимает всю доступную для него ширину родительского контейнера. При этом строчный элемент ссылка <a> помещается на предыдущей строке, так же ведёт себя и блочно-строчный <img>. В случае, если бы div не занимал всю ширину родительского контейнера, он бы всё равно занял свободное место под свою маржу, так что ссылка и изображение отображались бы точно так же. Кстати, обратите внимание на предустановленный браузером стиль display: block для элемента div. Все элементы HTML обладают предустановленным стилем (хотя это не всегда указано в панели разработчика) и отображаются как блочные, строчные или блочно-строчные, но об этом позже.

На скриншоте подтверждение сказанного: даже когда div стал занимать не всю ширину родителя за счёт указания для него свойства width, свободное место заняла его маржа. Это поведение блочных элементов, и это, как и предыдущая тема блочная модель, основополагающие знания для верстальщика и фронтенд разработчика. Вы уже знаете из предыдущего урока, что теперь мы можем при помощи маржи разместить этот div по центру или справа, но сейчас разговор о другом. Блочный элемент стремится занять всю ширину родителя, запомните это.

Строчные элементы

Строчные (они также называются линейными, или инлайновыми — inline) элементы не занимают всю ширину родительского контейнера, а располагаются «в потоке» текста. Например ссылки являются строчными элементами. В разметке несколько ссылок, указанных друг за другом, будут располагаться в одну строку, как одно предложение. Также ссылки и прочие строчные элементы (например span,mark,em), расположенные внутри параграфа или любого другого элемента, будут располагаться в одну строку с текстом, находящимся внутри этого же элемента. Это и есть поведение строчного элемента, когда элемент отображается как часть текста. Это поведение позволяет нам выделять одно или несколько слов в тексте как ссылку.

В отличие от div, ссылка и span являются строчными, они выстраиваются в ряд друг за другом, не занимая при этом всей строки. Также обратите внимание на изображение img, которое является блочно-строчным элементом и которое также выстраивается в ряд по нижней линии вместе с ссылкой и span. О блочно-строчных элементах поговорим позже, а пока что можно сказать, что они ближе к строчным и ведут себя в целом так же. Появившийся отступ над ссылкой и над span это высота текущей строки, она задаётся самым большим инлайновым элементом. Отсюда можно заключить, что если вы поместите изображение, например, в текстовый абзац, то строка с изображением будет отображаться с высотой, необходимой для размещения изображения:

Запомните данное поведение и, если однажды у вас в абзаце в одной из строк появится какой-то отступ, то, возможно, проблема именно в высоте строки какого-либо строчного элемента, изображения и т.д.

Строчные элементы не обрабатывают свойства ширины и высоты, а также верхних и нижних внешних и внутренних отступов (свойства width, height, margin-top, margin-bottom, padding-top, padding-bottom).

На скриншоте видно, что ссылка, размещённая в текстовом абзаце, из всех указанных для неё стилей получает только боковые отступы. На все прочие свойства она не реагирует, хотя браузер и отображает их в панели разработчика и на странице.

В строчные элементы можно вкладывать только строчные или блочно-строчные элементы, но не блочные. Единственным исключением является ссылка <a>, в неё может быть вложен любой элемент, группа элементов, целая секция и даже весь сайт.

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

Единственное отличие блочно-строчных элементов от строчных — это то, что они обрабатывают все вышеуказанные свойства.

На скриншоте видно, что отступы, ширина и высота применились при указании свойства display:inline-block. То есть мы указали, что данный элемент (ссылка) теперь является блочно-строчным (inline-block), поэтому все свойства к нему применились. Так, если вы хотите задать для ссылки или для другого инлайнового элемента вертикальный отступ, вы должны сперва сделать этот элемент блочно-строчным.

Display

За форматирование элемента на веб странице отвечает CSS свойство display. Как уже было сказано, каждый элемент по умолчанию является блочным, строчным или блочно-строчным. При помощи свойства display мы можем переопределить его форматирование. Заучивать наизусть, какой элемент как отображается, не нужно, это вы запомните со временем. Следует запомнить, что теги разделения контента, такие как main,section,header и пр., а также основной строительный контейнер div являются блочными. При помощи таких тегов создаётся каркас, структура сайта, а потому они должны вести себя «фундаментально». Такое замечание поможет вам запомнить. Также важно помнить про текстовый параграф <p>, который тоже является блочным.

Теги, отображающие медиаэлементы, такие как видео, аудио, изображения, фреймы, канвас, а также все теги форм (select,input,textarea,button), являются блочно-строчными. Такие теги редко помещаются прямо в тексте, как например ссылки или теги для выделения слов, поэтому они сделаны по умолчанию блочно-строчными.

Все прочие теги в основном предназначены для выделения отдельных слов\предложений в тексте и потому являются строчными. Это и span,em,strong,q,sub,sup и пр. Это почти все теги текстового контента. Впрочем, повторимся, заучивать это не нужно. Если вы не уверены в том, как отображается тег, посмотрите это в справочнике или в спецификации, или просто загуглите. Со временем и с практикой вы всё запомните.

Изначальное значение свойства display у тега отображается в панели разработчика браузера лишь для некоторых тегов. Это, однако, не отменяет того, что button например остаётся блочно-строчным, а ссылка строчной, даже если в инспекторе элемента не указан вообще никакой display.

У свойства display может быть очень много значений, однако основных, которые вам понадобятся в разработке, несколько. Их вам точно хватит на ближайшие пару лет, а с остальными вы к тому времени уже разберётесь и сами.

display
block делает данный тег блочным
inline делает данный тег строчным
inline-block делает данный тег блочно-строчным
flex создаёт флекс-контейнер (см. отдельный урок по флексбоксам)
grid создаёт grid-контейнер (см. отдельный урок по CSS Grid Layout)
none элемент не отрисовывается на странице
initial свойство принимает значение по умолчанию
inherit наследует значение от родителя
unset глобальное значение, автоматически устанавливает значение либо initial, либо inherit, в зависимости от того, является ли данное свойство наследуемым. Поскольку свойство display не наследуется, будет принято значение initial

Прочие, редко используемые в разработке значения:
list-item
— используется для создания элемента списка, аналогично тегу <li> (создаёт блочный элемент списка с маркером)
table
— используется для создания таблицы, аналогично тегу <table>
table-caption,table-column,table-row и пр.
— используются для создания элементов таблицы, таких как хэдэр, футер, caption таблицы и др.

И даже это не все значения display. Все перечислены в справочнике на странице display, однако остальные вам не понадобятся. Всё необходимое будет изучено в ходе дальнейших уроков по таблицам, флексбоксам, гридам.

Необходимо очков: