SPAN против DIV (встроенный блок)

Ответ 1

Согласно спецификации HTML, <span> является встроенным элементом, а <div> является блочным элементом. Теперь это можно изменить с помощью свойства display CSS, но есть одна проблема: с точки зрения проверки HTML вы не можете помещать элементы блока внутри встроенных элементов, поэтому:

<p>...<div>foo</div>...</p>

не является строго верным, даже если вы меняете <div> на inline или inline-block.

Итак, если ваш элемент inline или inline-block, используйте <span>. Если это элемент уровня block, используйте <div>.

Ответ 2

Если вы хотите иметь действительный документ xhtml, вы не можете поместить div внутри абзаца.

Кроме того, div с отображением свойств: встроенный блок работает иначе, чем span. Пробел по умолчанию является встроенным элементом, вы не можете установить ширину, высоту и другие свойства, связанные с блоками. С другой стороны, элемент со встроенным блоком свойств будет "течь" с любым окружающим текстом, но вы можете установить такие свойства, как ширина, высота и т.д. Пробел с отображением свойств: блок будет не поток таким же образом, как элемент встроенного блока, но создаст возврат каретки и будет иметь по умолчанию маржу.

Обратите внимание, что встроенный блок не поддерживается во всех браузерах. Например, в Firefox 2 и менее вы должны использовать:

display: -moz-inline-stack;

который немного отличается от встроенного блочного элемента в FF3.

Здесь есть отличная статья для создания элементов встроенного блока кросс-браузера.

Ответ 3

• Встроенный блок является промежуточной точкой между настройкой отображения элементов на встроенный или для блокировки. Он сохраняет элемент в поточном потоке документа, например display: inline does, но вы может манипулировать атрибутами полей элементов (ширина, высота и вертикальные поля), как вы можете с помощью display: block.

• Мы не должны использовать элементы блока внутри встроенных элементов. Это недействительно, и нет никаких оснований для такой практики.

Ответ 4

Я знаю, что Q старен, но почему бы не использовать все DIV вместо SPAN? Тогда все играет счастливым вместе.

Пример:

<div> 
   <div> content1(divs,p, spans, etc) </div> 
   <div> content2(divs,p, spans, etc) </div> 
   <div> content3(divs,p, spans, etc) </div> 
</div> 
<div> 
   <div> content4(divs,p, spans, etc) </div> 
   <div> content5(divs,p, spans, etc) </div> 
   <div> content6(divs,p, spans, etc) </div> 
</div>

Ответ 5

Как и другие ответили... div - это "элемент блока" (теперь переопределенный как Flow Content) и span - это "встроенный элемент" ( Фразинг контента > ). Да, вы можете изменить представление этих элементов по умолчанию, но есть разница между "потоком" и "блоком" и "фразировкой" по сравнению с "встроенным".

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

Все элементы выражения, такие как strong и em, могут содержать только другие элементы фразирования: например, вы можете поставить table внутри cite. Большинство потоков данных, таких как div и li, могут содержать все типы содержимого потока (а также содержание фраз), но есть несколько исключений: p, pre и th являются примерами не- -фазное содержимое потока ( "элементы блока" ), которое может содержать только фраз-контент ( "встроенные элементы" ). И, конечно же, существуют обычные ограничения элемента, такие как dl и table, только позволяющие содержать определенные элементы.

В то время как div и p представляют собой нефрагментированное содержимое потока, div может содержать другие дочерние элементы потока (включая больше div и p s). С другой стороны, p может содержать только содержание содержимого содержимого. Это означает, что вы не можете поставить div внутри p, хотя оба являются нефрагментированными элементами потока.

Теперь вот кикер. Эти семантические спецификации не связаны с тем, как элемент отображается. Таким образом, если у вас есть div внутри span, вы получите ошибку проверки, даже если у вас есть span {display: block;} и div {display: inline;} в вашем CSS.