Блочные и строчные элементы
Сегодня мы рассмотрим одну из фундаментальных тем в верстке сайтов – это блочные и строчные элементы.
Начну с банальных вещей - все элементы HTML делятся на 2 типа: блочные и строчные. И добавляя какой-либо элемент в разметку вашего сайта, вы должны четко понимать какой у него тип, потому что блочные и строчные элементы имеют кардинально разные свойства.
Блочные элементы
Блочные элементы предназначены для создания сетки страницы и разметки крупных блоков текста (заголовки, абзацы, списки). Для упрощения блочные элементы можно представлять как прямоугольные области на странице.
Они имеют следующие особенности:
- до и после блочного элемента существует перенос строки;
- блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы;
- блоки занимают всё доступное пространство по горизонтали.
В частности, блочными элементами являются теги p, h1, h2, ul, li и так далее.
Еще один важный блочный тег — это универсальный блочный тег div, который обозначает просто «блок» или «прямоугольный контейнер».
Строчные элементы
Строчные элементы предназначены для оформления отдельной части какого-либо текста или другого содержимого блочного элемента, например, нескольких слов в предложении.
Строчные элементы располагаются друг за другом в одной строке, при необходимости строка переносится. Особенности строчных элементов:
- до и после строчного элемента отсутствуют переносы строки;
- ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя;
- можно задавать только горизонтальные отступы.
В частности, строчными элементами являются теги a, strong, em, span и т.д.
Высота и ширина.
С шириной и высотой мы уже сталкивались при задании размеров картинок. Для других тегов эти параметры задаются точно также с помощью свойств width и height.
Так вот ширина и высота блочных элементов по умолчанию установлены в значение auto. Что это значит?
Ширина = авто - это значит, что блоки по умолчанию занимают всю доступную ширину, которая равна ширине родительского контейнера.
Высота = авто – это значит, что по умолчанию высота блочных элементов зависит от их содержимого. Если элемент пустой, то его высота будет равна 0.
Если задать блочному элементу ширину и высоту так, что содержимое элемента не будет в него помещаться, то оно как бы «выпадет» из него.
Эта проблема очень часто может возникать у новичков при ограничении высоты блоков, содержащих много текста. При уменьшении окна браузера, соответственно, и окна родительского контейнера, текст переходит на новые строки, а количество строк естественно увеличивается.
Как с этим бороться мы рассмотрим при верстке учебных макетов, сейчас просто отмечу, что не рекомендую Вам жестко ограничивать высоту блоков заданием высоты.
Что касается строчных элементов, то с ними все просто – они вообще не реагируют на задание ширины и высоты в CSS.
Управление типом элемента, свойство display
Тип элемента легко можно изменить с помощью CSS. За это отвечает свойство display. С его помощью, например, можно любой блочный элемент сделать строчным, а строчный - блочным.
У свойства display много значений, а самые часто используемые это:
- block - делает элемент блочным;
- inline - делает элемент строчным.
Каждый тег html при создании может быть либо блочным, либо строчным. Третьего не дано.
Но иногда возникает необходимость расположить в ряд несколько элементов с заданными размерами. Строчные элементы для этого не подходят, т.к. не воспринимают размеры. Блочные элементы тоже не подходят, т.к. до и после них существует перенос строки.
Решением проблемы является использование еще одного распространенного типа элементов – inline-block. Такой элемент называется инлайн-блочным и обладает рядом и блочных, и строчных свойств.