span and div tags - a css comparison
Archive - Originally posted on "The Horse's Mouth" - 2007-01-02 07:46:36 - Graham EllisBoth <span> and <div> tags allow you to set the style of your text - fonts, colours, weights, and so on. So what is the difference?
A <span>span tag allows you to alter the presentation style within the current hierarchical block, whereas the <div> tag starts a new block for you. And what does this mean? It means that you can specify options such as text alignment within a <div> but not within a <span>.
I understand people like to see these things in action:
Basic Text
A span - brown and should be right
A span - brown and should be right
A div - purple and will be right
More basic textand here's the HTML:
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-style: solid; border-color: green; padding: 3px;">
Basic Text<br />
<span style="text-align: right;color: brown;">A span - brown and <i>should</i> be right</span><br />
<div style="text-align: right;color: purple;">A div - purple and <i>will</i> be right</div>
More basic text</div>
Why did I use padding and not margin? Because padding goes into the element and margins go onto the element. That's "inside" v "outside"
Why did I put a <br /> after the brown but not after the purple? Because the <div> tag starts and ends its own block, so there's one there anyway unless you've set it to be inline, whereas there's no such block with the <span>.