Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Difference between SPAN and DIV tags?
- Thread starter Jimuniguy
- Start date
danielhozac
Programmer
SPAN affects only a piece of text while DIV is a block container and affects at least one line of text. //Daniel
The major thing:
DIV (like <P>) is a block-level element, while SPAN is inline element. Read in any online CSS guide what is the difference.
Span's implementation in IE sometimes seem to be the same as for block-level which is not correct.
Because of this many developers use spans instead of 'real' block-level elements and then wonder why does their page looks different in other browsers.
DIV (like <P>) is a block-level element, while SPAN is inline element. Read in any online CSS guide what is the difference.
Span's implementation in IE sometimes seem to be the same as for block-level which is not correct.
Because of this many developers use spans instead of 'real' block-level elements and then wonder why does their page looks different in other browsers.
djones7936
Programmer
Here is an example:
You can put the code into a temporary html file, then view it.
As you can see on the page, "div" takes up an entire line, and "span" only takes up the space of the text.
One (narrow) example of when you might choose div over span is when you need to center text.
"text-align:center" centers text within a specificed area, as represented by the background color.
When the center attribute is applied to "div", the text centers on the page/(in the container) as excepted. But when the center attribute is applied to "span", the text remains (visually) unchanged.
I hope this helps, -Dave
Code:
<html>
<span style="background-color:lightblue"> span </span>
<span style="background-color:lightgreen"> span </span>
<span style="text-align:center;background-color:pink"> span </span>
<div style="background-color:yellow"> div</div>
<div style="background-color:green"> div</div>
<div style="background-color:magenta"> div</div>
<br>
<table width="300" border="2">
<tr>
<td>
<span style="text-align:center;background-color:yellow"> span </span>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;background-color:yellow"> div </span>
</td>
</tr>
</table>
</html>As you can see on the page, "div" takes up an entire line, and "span" only takes up the space of the text.
One (narrow) example of when you might choose div over span is when you need to center text.
"text-align:center" centers text within a specificed area, as represented by the background color.
When the center attribute is applied to "div", the text centers on the page/(in the container) as excepted. But when the center attribute is applied to "span", the text remains (visually) unchanged.
I hope this helps, -Dave
conalcharles
Technical User
As far as I know besides the fact that <DIV> causes a line break and <SPAN> doesn't, <DIV> can act over block level elements like <P> etc while <SPAN> can't
conalcharles
Technical User
As far as I know besides the fact that <DIV> causes a line break and <SPAN> doesn't, <DIV> can act over block level elements like <P> etc while <SPAN> can't
- Status
Similar threads
