Содержание
При работе с 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