CSS Tutorial: The difference between a DIV element and a SPAN element

First of all, two concepts, one is the inline element, the other is a block-level element. The industry element is that the content of the element tag does not affect the current structure, it belongs to the application style, assists in applying the style sheet, and the block-level element is a block that occupies a single row, which is equivalent to adding a newline before and after the element.

The most obvious difference is that DIV (division) is a block-level element that can contain paragraphs, headings, tables, and even chapters, summaries, and notes. span is an inline element, the span is not wrapped around, it has no structural meaning, is purely applied style, when other inline elements are not appropriate, you can use span. A block element is equivalent to an inline element that is preceded and preceded by a
Line Wrap. In fact, block elements and inline elements are not immutable, as long as the block elements to define Display:inline, block elements become embedded elements, as well as the embedded elements defined Display:block is a block element.

Specific steps:

code example:

1 2 3 4 5

<style> div,span{border:1px solid #000 margin:2px;} </style> <div>div1</div><div >div2</div><span>span1</span><span>span2</span> <br/> <div style= " Display:inline ">div3</div> <div style=" Display:inline "> div4</div> <span style=" Display:block ">span3</span> <span style=" display:block ">span4</span>

Tip: You can modify some of the code before running

Tip: Some friends will say that Div is a layer tag, in fact, there is no layer in the HTML, but in order to be easy to understand, Dreamweaver wrote, each object can become "layer", only need to define position attributes ( Value is absolute or relavite). For example, to make a picture "layer," You can write code like this:

1

Special Tips

This example code runs as shown in the figure, to better illustrate the problem, here to block elements and embedded elements are added 1 pixel wide black solid border, from the figure can be seen, div defaults to block elements, the definition of Display property value is inline after the embedded elements show, and span defaults to inline elements, The Display property value is defined as a block element.

The span tag has an important and practical feature that it does nothing, and its sole purpose is to surround the other elements in your HTML code so that you can specify a style for them.