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

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

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

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

Блочные элементы – это элементы, которые в общем потоке располагаются друг под другом, как бы в столбик, при условии, что к ним не применены никакие правила CSS. Блочные элемент всегда занимает всю длину строки полностью.

Очень важно помнить при таком определении, что к этим элементам не применены никакие правила CSS, потому что с помощью CSS можно отобразить любые элементы всевозможными способами. Поэтому я и говорю, что без CSS было проще и понятнее.

Если вы не поняли, то приведу пример. Создайте пустую html-страницу и разместите на ней несколько изображений подряд.

<img src=”image1.jpg” />

<img src=”image2.jpg” />

<img src=”image3.jpg” />

Теперь откройте страницу в браузере и вы увидите примерно следующее:

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

Картинки выстроятся одна за другой в одной строке. Это строчные элементы. Изображение в html (тег img) по-умолчанию является строчным элементом.

Теперь попробуйте вместо картинок написать три заголовка:

<h2> Заголовок 1 </h2>

<h2> Заголовок 2 </h2>

<h2> Заголовок 3 </h2>

И в браузере вы увидите следующее:

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

Заголовки не выстроятся в одну строчку, а каждый заголовок будет занимать отдельную строчку. Каждый заголовок будет начинаться с новой строки. Это блочные элементы. Все заголовки h1-h6 в HTML – блочные по-умолчанию.

Такое разделение применяется не ко всем элементам. Например, элемент <br /> нельзя отнести ни к строченым ни к блочным элементам. Вообще я считаю, что его нельзя отнести к элементам. Этот тег скорее служит для упорядочивания других элементов и, кстатик говоря, мной не применяется. Я использую CSS.

Строчным элементам как правило нельзя задать верхний и нижний отступ. Попробуйте вставьте в текст ссылку (ссылка – это по-умолчанию строчный элемент) и задайте с помощью CSS для этой ссылки верхний и нижний отступы. Вы увидите что внешний вид ссылки т этого не изменится. Однако и из этого правила есть исключения. К примеру любое изображение в html позволяет применить к нему верхний и нижний отступы. Теперь вы понимаете, на сколько запутанно это разделение?

Еще один момент. CSS-свойство text-align будет действовать только на строчные элементы. Если в каком-то блоке будут находиться и строчные элементы и блочные и мы пропишем для этого блока text-align:center в каскадной таблице стилей, то по центру выровняться только строчные элементы, а блочные останутся на месте.

Теперь давайте немного углубимся в эту тему и внесем ясность. Дело в том, что в чистом HTML блочных и строчных элементов не существует. Всю блочность и строчность элементам придает CSS, даже если вы его не используете. И отвечает за это CSS-свойство display. В каждом браузере есть почти стандартные правила, по которым он решает каким образом отображать элемент. Вы можете проверить. Щелкните правой кнопкой на этом абзаце и выберет пункт Исследовать элемент или Исследовать элемент или Проинспектировать элемент (название пункта зависит от браузера).

Появятся средства разработчика и вы сможете увидеть все CSS-свойства, определенные для выбранного элемента. Там необходимо выбрать пункт Computed style, если у вас Chrome, или Вычислено если у вас Mozilla. В других браузерах это делается по аналогии. После этого нужно убрать или поставить галочку, которая отвечает за показ всех стилей, даже неопределенных. Вы увидите множество свойств. Там будут почти все свойства СSS. В этом списке можно найти свойство display со значением block, что говорит о том, что элемент блочный.

Если у вас не получилось произвести эту процедуру, то просто поверьте мне на слово. Стили для любого элемента в HTML определены даже в том случаее, если вы их сами не определяли.

Теперь подробнее поговорим о свойстве display. Его можно определить и в ручную. То есть строчность/блочность элемента можно задать самостоятельно. Вот почему я все время говорил “по-умолчанию является строчным” или “по-умолчанию является блочным”. Картинка будет строчной, если вы не укажете что она блочная.

Свойство display может принимать следующие значения: block – элемент показывается как блочный.

Inline – элемент отображается как строчный.

Inline-block – Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на строчные элементы (вроде тега img). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.


Карта сайта


Информационный сайт Webavtocat.ru