The difference between block-level elements and inline elements (HTML)

Please put the following two lines of code into the body tag:
<div style= "border:1px solid red;" >div1</div>
<div style= "border:1px solid red;" >div1</div>
The rendering effect of the browser:
Div1
Div1
These two div occupy two lines of space, called Block-level elements (blocks).
Then put the following two lines of code into the body tag:
<span style= "border:1px solid red;" >span1</span>
<span style= "border:1px solid red;" >span2</span>
The rendering effect of the browser:
Span1 Span1
These two spans are tied together in one line, called inline elements (inline).

The difference between a block-level element and an inline element:
· Block-level elements used to build the site architecture, layout, hosting content, such as: Div, UL, Li, DL, DT, DD, H1-H6, p, address ...
Inline elements are decorated with a line in the text, such as: A, span, strong, sub, SUP, img ...
· Block-level element is a box, the box is a wide height, that is, no matter how many things inside, the outside can be set its width height.
An inline element is a bag whose width is propped up by something inside.
· The code for converting between block-level elements and inline elements is as follows:
Display:block; /* turn into block element */
Display:inline; /* turn into inline elements */
· Block-level elements and inline elements call rules for CSS:
1. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, which can contain only other inline elements:
<div><a href= "#" ><span></span></a>--to
<span><div></div></span>--wrong
2. There are several special block-level elements that can contain only inline elements and no longer contain block-level elements, which are the following special tags:
H1-h6, p, dt.
<p><ol><li></li></ol></p>--wrong
<p><div></div></p>--wrong
3. Li can include DIV tag/parent UL or OL
Both Li and div tags are containers for loading content, with equal status and no level of rank.
4. Block-level elements are tied to block-level elements, inline elements and inline elements:
<div><div><a href= "#" ></a><span></span></div>--to
<div>

Note: Display:inline-block objects are presented as inline objects, but the contents of the objects are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces.

Elements of the Inline-block feature:

Renders an object as an inline object, but the contents of the object are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces. (accurately, the elements that apply this attribute are rendered as inline objects, the surrounding elements remain on the same line, but you can set the properties of the width and height parcel elements)

Not all browsers support this property, currently supported browsers are: Opera, safari in IE the use of inline elements Display:inline-block,ie is not known, but using display: Inline-block in IE will trigger layout, so that inline elements have the Display:inline-block attribute of the table disease. From the above analysis, it is not difficult to understand why ie, the block element set Display:inline-block property can not achieve inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is the row layouts, so after the trigger, the block element is still the row layout, but not as the block elements in opera as an inline object.

The difference between block-level elements and inline elements (HTML)