Создание сайтов с нуля - урок 10 - Блочные и строчные элементы (теги), 1 часть

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

Сегодня мы рассмотрим одну из фундаментальных тем в верстке сайтов – это блочные и строчные элементы.

Начну с банальных вещей - все элементы 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. Такой элемент называется инлайн-блочным и обладает рядом и блочных, и строчных свойств.