SPAN с блоком отображения

В чем разница между элементом TG40 по умолчанию и элементом TG41 по умолчанию с display: block?

Ответ 1

Существует различие в отношении достоверности и семантики элементов HTML. В противном случае они идентичны.

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

  • Некоторые элементы должны содержаться в элементе, который определен как блок. Это не имеет ничего общего со свойством CSS display, но с семантикой HTML: общая идея основана на том, что inline всегда являются потомками блоков (что, в общем, хорошая идея)

  • Теперь, если у вас есть span с display:block, он, в смысле CSS, будет действовать точно так же, как div. Однако с семантической точки зрения, если вы встраиваете элементы уровня блока в span, вы создаете недопустимый HTML, потому что вы вкладываете блок во встроенный элемент.

Ответ 2

  • Элементы, которые могут содержаться в div или span (создание отображения span: block, например, не позволяет разместить внутри него таблицу)
  • рендеринг, когда CSS недоступен

Ответ 3

<span> по умолчанию используется display:inline;, тогда как <div> по умолчанию - display:block;

Это единственное различие между ними, поэтому, если вы укажете display:block; для диапазона, он будет действовать так, как обычно действует div, и наоборот.

display:inline; заставляет поток элемента работать в тексте тела, тогда как display:block; заставляет его действовать как блок (как ни странно!).

(обратите внимание, что также существует менее известный вариант display:inline-block;, который является промежуточным домом между ними. <img> теги по умолчанию для этого параметра)

Ответ 4

<span> является встроенным элементом по умолчанию. То есть элемент <span> не генерирует никаких разрывов до и после. Кроме того, есть некоторые свойства, которые нельзя применить к встроенным элементам, например height.

<div> по умолчанию является элементом уровня блока. Это <div> создает прерывания до и после него при визуализации.

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

См. this для объяснения всех свойств display.

Ответ 5

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

Как указано в этой ссылке, значение block указывает, что:

Элемент будет генерировать блок-блок (разрыв строки до и после элемента)

По умолчанию значение этого свойства равно inline, которое определяется как:

Элемент будет генерировать встроенное поле (без разрыва строки до или после элемента). Это значение по умолчанию

Ответ 6

A span элемент со стилем display: block по существу становится элементом div. Это заставляет ширину элемента заполнять любой контейнер, в котором он находится.

Ответ 7

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

  • Видимое поведение - концепции формирования блоков VS Внутренний формат форматирования
  • (X) отношения валидности HTML - в принципе, вы никогда не должны опускать элемент блока внутри встроенного, поэтому, если вам нужно создать структуру элементов поведения блока внутри элемента ссылки (который является встроенным), используйте интервалы и установите их отображение: block via CSS