The difference between the span element and the DIV element _ experience Exchange

I learned the meaning of block when I was doing adaptive skin a few days ago. Found such a problem.
What is the difference between a SPAN element and a DIV element
Solution Ideas:
The most obvious difference is that the div is a block element, and span is an inline element. The block element is equivalent to the inline element in the previous and
Line break. In fact, block elements and inline elements are not immutable, as long as the block element is defined Display:inline, the block element becomes an inline element, similarly, to the embedded element defines the display:block becomes the block element.
Specific steps:
<textarea id="runcode18906"><style> div,span{border:1px solid #f00; Margin:2} </style> div1div2 <span>span1</span> <span>span2</span> div3 div4 <span style= "Display:block" >span3</span> <span style= " Display:block ">span4</span></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Tip: Some friends will say that Div is a layer tag, in fact, there is no layer in the HTML of this statement, but for easy to understand, in Dreamweaver, each object can become a "layer", only need to define the object position property ( Value is absolute or relavite). For example, to make a picture "layer," You can write code like this:

Special Tips
This example code runs the effect (point run Code) shown, in order to better illustrate the problem, here the block element and inline elements are added 1 pixels wide red solid border, you can see that the div default is a block element, the Display property value is defined as inline after the embedded element is displayed, and span defaults to inline elements, Defines that the display property value is block and is displayed as a block element.
Special Instructions

This example illustrates the use and significance of block and inline for the two values of the display property.

