The difference between DIV and span

Div and span differences and Div and San usage

The next step is to understand the differences and usage of the div and span in the DIV+CSS development, especially in the use of HTML pages. When a novice develops a Web page using Web standards (div CSS), the first question is what is the difference between a div and span , when to use a div, and when to use a span tag.

Directory

1. Features and differences
2. Summary
3. Knowledge expansion
4. Case Effect Demo

First, the difference between div and span and features-TOP

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, indicating

SAPN Label Use Cases

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); "I am content three; span" and " I am content four; span "Then, how wide is the text content, taking up a wide distance, using the <span> tag and not using the same effect.

Ii. span Tag Summary-TOP

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.

Iii. expansion and promotion-TOP

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}

Iv. Illustration Example Demo effect-TOP

Set CSS styles on span

Analysis: You can draw a span without naming the pseudo-class name and use CSS inheritance properties directly to set CSS styles on the span. In this case, the style in the Div is set to the blue word for the text, but the style of the span is set to the text in red by inheriting.

The difference between DIV and span