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

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?

开发者_StackOverflow社区

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

---

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.

---

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/

---

This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.