Разница между div и span

Question

В чем разница между div со свойством display:inline-block и span с display:inline-block?

Answer 1

Существует два различия между элементами div и span:

• div имеет display:block по умолчанию, в то время как span имеет display:inline по умолчанию.
• div является блочным элементом и может содержать блочные элементы и встроенные элементы, тогда как span является встроенным элементом и может содержать только другие встроенные элементы.

Как только вы применитеdisplay:inline-block они ведут себя одинаково.

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

Это, например, допустимо:

<div>
  <div>
    <span></span>
  </div>
  <span></span>
</div>

Например, это недопустимо:

<span>
  <div>
    <span></span>
  </div>
  <div></div>
</span>

Браузер попытается изменить расположение элементов в недопустимом коде, что обычно означает, что он перемещает элементы div за пределы элементов span.Поскольку в спецификации HTML (до версии 5) сообщалось только о том, как следует обрабатывать правильный код, у каждого браузера есть свой способ обработки неправильного кода.

Answer 2

Просто хотел добавить исторический контекст к тому, как это произошло span против div

История span:

3 июля 1995 г. Бенджамин С. У. Ситтлер предлагает общий текст контейнер тег для применения стилей к определенным блокам текста. Рендеринг является нейтральным, за исключением случаев, когда используется вместе с таблицы стилей. Существует спор вокруг о читабельность, смысл. Берт Бос упоминает природу расширяемости элемента через атрибут класса (со значениями, такими как город, человек, дата и т. д.). Пол Прескод обеспокоен тем, что оба элемента будут оскорблены Он выступает против текста, в котором говорится, что "любой новый Элемент должен быть на старом "и добавление" Если мы создаем тег с без семантики, его можно использовать где угодно, не ошибаясь. Мы должны заставить авторов правильно пометить семантику своего документа. Мы должны заставить поставщиков редакторов сделать этот выбор явным в своих интерфейсы ".

- Источник (w3 wiki)

Из проекта RFC, представляющего span:

Во-первых, общий Tainer необходим для переноса атрибутов LANG и BIDI в случаи, когда другой элемент не подходит; элемент SPAN Для этого вводится.

- Источник (черновик IETF)

История div:

CENTER был представлен Netscape до того, как они добавили поддержку HTML 3.0 DIV элемент. Он сохраняется в HTML 3.2 из-за его широкое распространение.

HTML 3.2 Spec

В двух словах, оба элемента возникли из-за необходимости в более общем контейнере, который не имел прикрепленной семантики. Span был предложен в качестве более общей замены элемента <text> для стиля текста. Div был предложен в качестве общего способа разделения страниц и имел дополнительное преимущество замены тега <center> для выравнивания по центру контента. Div всегда был блочным элементом из-за его истории как разделителя страниц. Span всегда был встроенным элементом, поскольку его первоначальная цель заключалась в стилизации текста, и сегодня div и span стали общими элементами со свойствами по умолчанию для блока и встроенного отображения.

Answer 3

Разница между

и si в том, что у нет стилей по умолчанию, где у есть разрыв абзаца.Следовательно, оба тега очень похожи, применяя отображение свойства css: inline-block будет иметь похожий эффект, но в сочетании с выравниванием по вертикали может иметь различный эффект. Посмотрите по этой ссылке: http://www.brunildo.org/test/inline-block.html