The difference and conversion between block elements and inline elements

Block elements and inline elements are the basic content of CSS learning, which is explained in detail below!
According to the CSS specification, each page element has a display property that determines the type of the element, and each element has a default display property value, such as a DIV element, whose default display property value is "block", becoming a block-level element The default display property value for the span element is "inline", which is called the inline element.

block-level elements : will automatically occupy a certain rectangular space, you can set the height, width, internal and external margins and other properties to adjust the appearance of this rectangle.

inline Elements : There is no independent space of its own, it is attached to other block-level elements exist, therefore, the element in the row set height, width, internal and external margins, and other properties are invalid.

Common block-level elements and inline element block-level elements:
Div, p, H1-h6, HR, UL, OL

Inline elements:
A, B, I, U, EM, input, select, IMG, label, BR

Conversion of CSS block elements to inline elements:

Block career in: Display:block;
In-line inward block: display:inline;

The difference and conversion between block elements and inline elements