Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the difference between div and span in HTML". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between div and span in HTML".

HTML div tag

Div tags are block-level elements, with the characteristics of block-level elements. The contents of each pair of div tags () can occupy one line, and no other tags are displayed on one line; div tags are always displayed from the new line.

And the div tag can set its own width through the css style (or omit, when the css custom width is not used, the div tag's width is 100% of its container), height, and can also set the distance between the tags (outer margin and inner margin)

We can also use other tags (inline elements, block-level elements) in the div tag, such as: span tag, p tag, or div tag.

Simple example of div tags: the container that sets these div tags has a width of 500px and a height of 500px

one

two

three

four

five

six

Content 1, use div, no width, no margin

Content 2, use div, do not set width, set inner margin padding: 20px

Content 3, use div, do not set width, set outer margin margin: 20px

Content 4, use div, set width, set outer margin margin: 20px

Content 5, use div, set width, set inner margin padding: 20px

Content 6, use div, no width, no margin

Effect picture:

Simple example 2: add other html tags to the div tag

one

two

three

four

five

Span tag span tag a tag

P label

Div tag

Effect picture:

HTML span tag

Span tags are inline elements and have the characteristics of inline elements. Span tag elements and other tag elements are displayed on one line (except block-level elements), not on another line (as in the example above).

Span tag width, height can not be set through the css style, its width and height by its own content (text, pictures) control, with the content of the width and height changes; span tags can not control the outer and inner margins, although you can set the left and right outer and inner margins, but the upper and lower outer and inner margins cannot be set.

Also, span tags can only hold text or other inline elements, not block-level elements.

A simple example of a span tag:

Set the inner margin of the span.span1 container padding: 20px span tag outside the container margin: 20px

one

two

three

Span tag span tag a tag

Div tag

Within the span tag, add the span tag a

Effect picture:

As you can see, although the inner margin padding expands the span.span1 container, the position of the span tag does not move down.

Thank you for your reading, the above is "what is the difference between div and span in HTML?" after the study of this article, I believe you have a deeper understanding of the difference between div and span in HTML, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.