Monday, August 10, 2009

CSS DIV and SPAN tag

With usage of <p>, <ul>, <h1> you can distinguish a group of page elements. But in many cases you want to distinguish an element or a group of elements or parts of a document which can't be described in any HTML tags. In those cases SPAN and DIV are used to descrive parts of element.

Difference between DIV and SPAN
The element <span> is called a neutral element which does not add anything to the document itself. But the CSS part within span adds visual style to the document.

On the other hand <div> tag adds a newline/line break after the block.

DIV is called a block-level element whereas a SPAN is called an inline element.

The <div> tag is wrapped around a whole section of content, or block and <span> is wrapped around content which is on just one line.

With an example I am trying to make you understand the differences between these two.
<div style="BACKGROUND-COLOR: #cccccc; padding-left:2em; padding-top:1em; padding-bottom:1em;" >This is a div example
</div>Now starting span example.
<span style="BACKGROUND-COLOR: #cccccc; padding-left:2em; padding-top:1em; padding-bottom:1em;" >This is a span example
</span>Span example is finished.


This is a div example

Now starting span example.This is a span exampleSpan example is finished.

We see here, after <div> block is finished there is a line break but after <span> there is no line break.
And background span over whole <div> block which indicates <div> is block level. And <span> spans within
line.
Related Documents

No comments:

Post a Comment