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

In this issue, the editor will bring you about the difference between DIV elements and SPAN elements. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

We will focus on the difference and application of DIV element and SPAN element in standard layout. First, we will talk about two concepts: SPAN element is an inline element, DIV element is a block-level element, and DIV element is a block-level element that occupies a separate line, which is equivalent to adding a newline before and after a single element.

The difference and Application of DIV element and SPAN element in Standard layout

Let's start with two concepts. The SPAN element is an inline element and the DIV element is a block-level element. Inline element means that the content marked by the element will not affect the current structure, belonging to the application style, assisting the application of style sheets, etc., while the DIV element, that is, the block-level element is a block, occupying a separate line, which is equivalent to adding a new line before and after the element.

The most obvious difference between the two is that DIV (division) is a block-level element that can contain paragraphs, headings, tables, and even chapters, summaries, and comments. And SPAN is an inline element, there is no line wrapping before and after SPAN, it has no structural meaning, it is purely applied style, when other inline elements are not appropriate, you can use SPAN. A DIV element, that is, a block element is equivalent to an embedded element, one before and after each.

Change the line. In fact, block elements and inline elements are not immutable. As long as you define a display:inline for a block element, a block element becomes an embedded element. Similarly, a display:block for an embedded element becomes a block element.

Code example:

Div,span {border:1pxsolid#000;margin:2px;} div1div2 span1span2

Div3 div4 span3 span4

Tip: some friends will say that DIV is a layer tag, in fact, there is no layer in HTML, but it is written in Dreamweaver for easy understanding. Every object can become a "layer". You only need to define the position attribute for the object (the value is absolute or relavite). For example, to make a picture a "layer", you can write code like this:

Special hint

In order to better illustrate the problem, both block elements and embedded elements are added with a solid black border with a width of 1 pixel. The DIV element defaults to the block element, and the display attribute value is defined as inline after the embedded element is displayed, while Span defaults to the embedded element. After defining the display attribute value as block, it is displayed as a block element.

An important and practical feature of the SPAN element tag is that it does nothing, and its purpose is to surround other elements in your HTML code so that you can assign styles to them.

The above is the difference between the DIV element and the SPAN element shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.