В чем разница между блоком и встроенным блоком?

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

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

В нашем первом примере мы начинаем с использования тега, который по умолчанию является встроенным элементом. Как видно из приведенного ниже примера, текст промежутка имеет красный цвет и содержится в одной строке (в строке) текста до и после промежутка.

пример
текст, чтобы дать пример того, как текст span может быть элементом inline, block или inline-block и как он может изменять внешний вид текста.

HTML код:

текст span

CSS дисплей: блок

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

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

HTML код:

текст span

CSS дисплей: встроенный блок

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

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

HTML код:

текст span

Почему я бы использовал встроенный блок вместо встроенного?

Посмотрев приведенные выше примеры, вы можете сразу спросить себя, зачем мне использовать элемент block или inline-block? Делая элемент блок-элементом, вы получаете возможность иметь вертикальную высоту этого элемента, как показано ниже.

Линейный пролет с высотой

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

HTML код:

текст span

Линейный блок пролет с высотой

Пример текста, чтобы дать пример того, как текст span может быть элементом inline, block или inline-block и как он может изменять внешний вид текста.

HTML код:

текст span
Ссылка на основную публикацию