Разница между блочными и инлайн-элементами

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

Итак, давайте рассмотрим различия между встроенными и блочными элементами в HTML и различные часто используемые встроенные и блочные элементы HTML.

Блочные элементы: Они занимают всю доступную ширину независимо от ее достаточности. Они всегда начинаются с новой строки и имеют верхнее и нижнее поля. Они не содержат никаких других элементов рядом с собой.

Примеры блочных элементов:

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

Элементы семантического блока HTML 5:

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

Пример:

Вывод: Из приведенного выше вывода видно, что используются 3 разных блочных элемента с разным цветом фона и границей, чтобы показать, как блочные элементы занимают всю ширину и какое поле они оставляют. Три блочных элемента ,

, используются в приведенном выше выводе.

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