What is the difference between div and span in the HTML page layout?

Many of the new friends do not understand the difference between the two labels, you may think that span is a piece, div is a piece, the same role why have two tags? This article will give you a solution to this confusion.

The difference and characteristic of Div and span

The following is an introduction to the system by default when CSS styles are not set on the Development page page
Div and Span differences
The div occupies a row,
Span occupies a wide spatial distance of how wide the content is

Analysis: From the very easy to know "I am content one; div" and "I am content two; div" Two content is used outside the <div> tag, they get the style is occupied a row of space (equivalent to line); and "I am content three; span" and "I am content four Use span "Then, the text content is how wide, occupies the wide distance, uses the <span> label and does not use the same effect.

Span Label Summary

It is possible to use DIV and span when developing Web pages, and it is often understood that there is no difference. But note that Div occupies a row, span does not occupy a row, the content occupies a large width, the span is how wide.

Expansion and Promotion

The span within the DIV does not need to name the CSS selector pseudo-class, as in the example below
If the div's class is Yangshi, then the internal span setting CSS property is the code below
. Yanshi span{properties and property values}

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

The different types of box models in CSS

CSS3 the implementation of the effect of making the dynamic switch

Steps to implement the content property of CSS3