The difference and usage between div and span

Next, learn about the production of HTML web pages when developing with div+css, especially the difference and usage of div and span in tag application. When a novice uses web standards (div css) to develop a web page, the first question they encounter is what is the difference between div and span, when to use div and when to use span tags

The following is an introduction to the system defaults when no CSS style is set for the development web page.

1. Differences and characteristics between DIV and SPAN

Difference between div and span

The position occupied by div is one line,
The span occupies the same space as the content, as shown in the following figure.

Span tag use case screenshot

2. Span tag summary

When developing web pages, you can use both div and span, and it can usually be understood that there is no difference. But please note that div occupies one line, while span does not. The width of span is as wide as the content.

Generally speaking, div is used for web page layout, p tag is used for paragraph content, and span is used to set the style or color of part of the paragraph content.

3. Expansion and improvement

The span inside the div does not need to name the CSS selector pseudo-class, as shown below

If the class of div is yangshi, then set the CSS attribute for the span inside. The code is as follows
.yanshi span{attribute and attribute value}

4. Demonstration effect of legend example

Analyzing the above figure: we can conclude that span does not need to be named with a pseudo-class name, and can directly use CSS inheritance attributes to set the CSS style for span. The original style of the div is to set the text to blue, but the style of the span is set to red through inheritance.

I hope the CSS cases summarized on the divcss5 website are helpful to you. Here is a technical article explaining the differences and usage of div and span.

Q: What is the difference between DIV and SPAN?

Answer: Solution:

The biggest feature of DIV and SPAN elements is that no formatting or rendering is performed on the objects within the elements by default. Mainly used to apply style sheets. The most obvious difference between the two is that DIV is a block element, while SPAN is an inline element (also translated as an embedded element).

Specific steps:

1. Block elements are elements that start rendering on a new line, while inline elements do not need to start on a new line. You will have a more vivid understanding by testing the following code:
Test <span> is displayed immediately following the previous "test" </span> <div> will be displayed on a new line here </div>
2. Block elements and inline elements are not static. They can be converted to each other by defining the display property value of CSS, such as:
Test <div style="display:inline">Immediately following the previous "Test" display</div> <span style="display:block">Here will be displayed on a separate line</span>
Tip: If you do not define any CSS properties for the DIV element, its display effect will be the same as the P element.

Because of the special nature of DIV and SPAN elements, they are generally used to apply style sheets, such as defining them as layers with CSS. What needs to be distinguished is the difference between block elements and inline elements, as well as the conversion between the two.

DIV specifies the container for rendering HTML.
SPAN specifies an inline text container.
In general, a div occupies a block, and its default display attribute is block, which means a block. like:
<div>aaa</div>bbb is displayed in two lines.
As for span, its default display attribute is inline, which means it can be connected together. For example: <span>aaa</span>bbb, it will be displayed as one line.
Div is generally used for typesetting, while span is generally used for local text styling.