tgoop.com/prog_way_blog/118
Last Update:
Различия блочных и строчных элементов
Простой вопрос с собеседования, в котором путается много новичков. Предлагаю расставить всё по местам.
Итак, все элементы в HTML делятся на две основные группы: блочные и строчные.
Блочные элементы - это та группа элементов, которые при размещении занимают всю доступную ширину. Блочные элементы всегда становятся друг под другом.
Строчные элементы - это группа элементов, ширина которых соответствует ширине контента внутри них. В отличии от блочных элементов, они располагаются в строку, если для этого хватает места.
Также тип элемента можно изменять при помощи стилей. Если блочному элементу необходимо задать поведение строчного, то достаточно для него указать правило display: inline. Для обратной ситуации по аналогии указывается display: block.
Также существует что-то среднее между блочным и строчным элементом. Для этого необходимо задать правило display: inline-block.
Пример блочных элементов: <div>, <p>, <ul>, <h1>
Пример строчных элементов: <a>, <span>, <strong>, <img>
Из интересного, в более старых версиях HTML было так, что в блочные элементы можно было вкладывать как блочные, так и строчные элементы. А в строчные можно было вложить только строчные. Сейчас такого нет. В HTML5 порядок вложения тегов ни на что не влияет. В новой спецификации используется категориальное деление тегов. Об этом в других постах.
И на этом всё. Достаточно просто, но почему-то вызывает много путаницы. Да и для повторения лишним не будет. Спасибо за прочтение, это важно для меня ❤️
#web #theory
BY progway — программирование, IT
Share with your friend now:
tgoop.com/prog_way_blog/118