Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you choose when to use DIV and when SPAN, to wrap something?

Tags:

html

css

xhtml

How do you choose when to use DIV and when SPAN, to wrap something?

Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.

And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.

What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?

and when we use blank div or span (no content inside) to get some effect, than which is correct?

like image 710
Jitendra Vyas Avatar asked Jan 23 '11 14:01

Jitendra Vyas


2 Answers

As you note, you should use divs as dividers of blocks, and spans for marking inline content.

And yes, you should try to avoid changing the display types of them.

like image 51
Oded Avatar answered Sep 27 '22 00:09

Oded


Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.

Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/

like image 41
Shadow Wizard Hates Omicron Avatar answered Sep 24 '22 00:09

Shadow Wizard Hates Omicron