CSS Classroom – Div vs SpanBy
When it comes to web design and web coding, for that matter, there is usually more than one way to accomplish what you are trying to do. Often, the reason for choosing one method over another is efficiency (or logic). In talking with a friend/client the other day, the topic of CSS came up. One of the things she was asking me was, how do you know when to use the DIV element and when do you use SPAN? (Rather than confuse WordPress with trying to display the code or installing another Plug-in, I am going to use all CAPS when referring to elements)
In a nutshell, DIV is a block level element. In other words, you use it to define the characteristics you want a whole block of code to follow. It is used to break up sections of a page and it can contain additional tags. If you are familiar with HTML, the DIV element is very similar to the P (paragraph) element.
On the other hand, SPAN is an inline element. Inserting a SPAN tag into a line of code lets the browser know to apply the indicated style to a small section of text, but not to break the line. It cannot contain any additional elements. It is kind of like the old FONT element that you would apply in HTML.
Here is another way to remember it – a DIV can contain a SPAN but a SPAN cannot contain a DIV.