Различия между блочными и встроенными элементами

HTML состоит из различных элементов, которые действуют как строительные блоки веб-страниц. Каждый из этих элементов попадает в одну из двух категорий: элементы уровня блока или встроенный элемент. Понимание разницы между этими двумя типами элементов - важный шаг в создании веб-страниц.

Элементы уровня блока

Так что же такое блочный элемент? Элемент уровня блока - это элемент HTML, который начинает новую строку на веб-странице и расширяет всю ширину доступного горизонтального пространства своего родительского элемента. Он создает большие блоки контента, такие как абзацы или разделы страницы. Фактически, большинство HTML-элементов являются элементами блочного уровня.

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

Встроенные элементы

В отличие от блочного элемента, встроенный элемент:

• Это может начаться в строке.
• Новая строка не начинается.
• Его ширина простирается только настолько, насколько это определено его тегами.

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

В HTML также есть третий тип элементов: те, которые вообще не отображаются. Эти элементы предоставляют информацию о странице, но не отображаются при отображении в веб-браузере.

Например:

•  определяет метаданные.
•  - это элемент HTML-документа, содержащий эти элементы.

Переключение типов строчных и блочных элементов

Вы можете изменить тип элемента со встроенного на блочный или наоборот, используя одно из этих свойств CSS:

• дисплей: блок; 

• дисплей: встроенный; 

• дисплей: нет;

В CSS свойство display позволяет вам изменить встроенное свойство на блок, или блок на встроенный, или не отображать вообще.

Когда менять свойство отображения

В общем, оставьте свойство отображения в покое, но в некоторых случаях может быть полезно поменять местами встроенные свойства отображения и свойства отображения блока.

• Меню горизонтального списка: Списки представляют собой элементы уровня блока, но если вы хотите, чтобы ваше меню отображалось горизонтально, вам необходимо преобразовать список во встроенный элемент, чтобы каждый пункт меню не начинался с новой строки.
• Заголовки в тексте: Иногда может потребоваться, чтобы заголовок оставался в тексте, но при этом сохранялись значения заголовка HTML. Изменение значений с h1 по h6 на встроенные позволит тексту, который идет после закрывающего тега, продолжать течь рядом с ним в той же строке, а не начинать с новой строки.
• Удаление элемента: Если вы хотите полностью удалить элемент из документа нормальный поток, вы можете настроить отображение на

  никто

  Одно замечание, будьте осторожны при использовании дисплея: нет. Хотя этот стиль действительно сделает элемент невидимым, вы никогда не захотите использовать его, чтобы скрыть текст, который вы добавили по причинам SEO, но не хотите отображать для посетителей. Это верный способ наказать ваш сайт за черный подход к поисковой оптимизации.

Распространенные ошибки форматирования встроенных элементов

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

Встроенные элементы игнорируют несколько свойств:

• ширина

  а также

  высота

• Максимальная ширина

  а также

  максимальная высота

• минимальная ширина

  а также

  мин-высота

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