This post is archived from thechasescene.com & rcalabs.com
One of my reader’s asked:
What’s the difference between a span element and a div element?
That’s a great question!
The main difference is that spans display as “inline” elements while divs display as “block” elements.
Say what?!
Inline & block may seem like abstract concepts, but as the old saying goes, a picture is worth a thousand words, so let’s draw one.
Below, I’ve created two “containers”: the first containing a couple of span elements and the second containing a couple of div elements.
An Experiment with div and span elements
Do you see how the container with span elements “fill” in the area that contains them as the spans are created? They are only as wide as the contents inside of them (unless you add margins or padding), and they stack next to each other inside the container.
A div, on the other hand, is the full width of the container it’s in (unless you define a width in styling), and stacks on top of the div that follows it.
You can always define a div as an inline element by using the CSS display: inline; and a span as a block element by using display: block;, but if you’re just starting out with learning CSS, it’s best to get used to working with divs and spans as they were intended to be used.

People don’t say it so we’ll focus on the content, but because we’re so easily drawn by first impressions (the cover). We constantly make assessments based on first encounters (what you see, hear or smell…that’s right, I said smell).

