Comparison between div and span in HTML

This article mainly introduces the comparison between div and span in HTML, and introduces the usage and comparison of p and span respectively. Those who are interested can learn more

1.

and

1.

Tag

# The ##

tag can define partitions or sections (pision/section) in the document, thereby dividing the document into independent and different parts. The

tag can be used as a strict organizational tool and does not use any formatting associated with it, which contains the idea of ​​​​separating HTML markup and presentation styles. In actual work, we usually specify the id or class attribute for the

tag to make the tag more effective.

is a block-level element, which means that its content automatically starts on a new line. And actually newlines are the only formatting behavior inherent in

.

The following HTML simulates the structure of a news website. Each pair of

tags combines the title and summary of each news item. That is,

adds additional structure to the document. At the same time, since these

belong to the same type of elements, you can use the class="news" attribute to identify these

tags. This not only provides

adds appropriate semantics and facilitates further use of styles to format

.

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

2.Tags

Tags are used to group inline elements in the document.

  <span style="color: Red">注意：</span>

2. Block-level elements and inline elements

Block-level elements (block elements) and inline elements/inline elements (inline elements) ) is a concept in CSS. Elements like

and

are often called block-level elements. This is because these elements appear as a block of content, a "block box". In contrast, elements such as and are called "inline elements" because their content appears on a single line, an "inline box."

The concepts of block-level elements and inline elements are not fixed, but relative. We can change the type of box generated using the element's display property. This means that you can make inline elements (such as elements) behave like block-level elements by setting the display attribute to block; you can also make the generated elements become inline elements by setting display to inline; or even, We can set the display attribute to none so that the element has no box at all. In this case, the box and all its contents will no longer be displayed and will not occupy space in the document.

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

3. Comparison between

and

1. Similarities: The

tag and the tag are tags used to divide intervals but have no actual semantics; both are mainly used to apply style sheets.

2. Difference: The

tag is a block-level element, and the browser will automatically add a line break tag before and after it; tag is an inline element, and newline tags will not be automatically added before and after it.

If you want to display two pieces of content on the same line in a web page layout, the simplest way is to wrap them with tags. For example, a page has two adjacent elements, one is

, the other is . To display them on the same line, change this

to . Of course, this can also be achieved by setting the display attribute of tags such as

to inline through CSS.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

I will explain to you in detail how to create div in js through code, span, label

Discuss in detail the difference between display:inline style and span in div

How to define the minimum height of inline elementsspan

The above is the detailed content of Comparison between div and span in HTML. For more information, please follow other related articles on the PHP Chinese website!