Как вы выбираете, когда использовать DIV и SPAN, чтобы что-то обернуть?

Как вы выбираете, когда использовать DIV и когда SPAN, чтобы что-то обернуть?

Много раз, когда мы создаем HTML-код PSD 2, в некоторых условиях, чтобы получить какой-либо эффект или обернуть что-то, чтобы получить необходимый эффект, мы используем DIV или SPAN.

И я знаю, что DIV - это элемент уровня блока, а SPAN - встроенный элемент уровня, и мы можем изменять свойства отображения через CSS. и я также знаю, что DIV не может войти внутрь SPAN.

В каких случаях используется DIV как display:inline и SPAN как display:block? и должны ли мы стараться избегать этих сценариев? это семантически некорректно?

и когда мы используем пустой DIV или SPAN (без содержимого внутри), чтобы получить какой-то эффект, чем это правильно?

ОТВЕТЫ

Ответ 1

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

И да, вы должны стараться избегать изменения типов отображения.

Ответ 2

Что касается пустого элемента, div лучше, так как вы можете определить его ширину и высоту, а для span он не будет иметь надлежащего эффекта.

Самый простой пример для доказательства этой точки можно увидеть здесь: http://jsfiddle.net/yahavbr/4DZkV/

Ответ 3

Это по-прежнему хороший вопрос, но предлагаемые ответы только, кажется, затрагивают часть вопроса. Существует три типа отображения CSS, которые помогают в перспективе: inline, block и inline-block. Если вы прочтете эту другую тему Stackoverflow, CSS display: inline vs inline-block, я думаю, вы получите некоторые полезные рекомендации. Например, если вам нужно убедиться, что элемент имеет отличные верхние и нижние отступы и поля, то, вероятно, он должен быть div (с стилем CSS inline-block), иначе span, вероятно, лучший выбор.