Understanding the Difference Between DIV and SPAN

Published on Saturday, 25th Apr in CSS Tutorials

It can be a bit confusing trying to figure out when to use a span and when to use a division, but this quick tutorial should help to clarify things.

Understanding the Difference Between DIV and SPAN
To keep things simple you can think of a as an in-line element and a as a block level element.

While a span allows you to separate things from the other elements around them on a page or within a document, it does not cause a line break. This is why it is perfect for in-line styling, like coloring a single word in a sentence to draw more attention to it.

But a div, by default, creates a line break because it is used to make separate containers or boxes within a page or document, hence the name division. So the proper way to use a div is as a containing element, rather than an inline styling element.

So to wrap up this quick CSS lesson, a span can be used within tags, but a div should not. If you remember that span is in-line level and div is block level, you’ll be fine.

Worth Reading

Friday, 15th May in Development

Automatically Convert URLs to Links - PHP

You may have been stuck in a situation where you wanted to convert all URLs inside a block of text to clickable links, but to keep already constructed links intact.

Tuesday, 21st Apr in Development

Google's Mobile Friendly Update

Earlier this year, Google announced that it was making a change to its search algorithms and today they begin rolling out their mobile-friendly update.

From the Archives



Fixed-width corporate template featuring large pitch area.