The blocks and Inline-block found in the site creation process are different.

Inline-block, in a nutshell, is to specify the Inline-block property of an object in CSS through Display:inline-block, which can be presented as an inline object , but the object's contents as a block object presentation. Sometimes we want the element to have a width height and a peer feature, and we can use Inline-block at this time. The properties of block are characterized by the following characteristics:

1. The block element will have a single row, and multiple block elements will have their own new row. By default (that is, without setting the width), theblock element width automatically fills its parent element width .
2. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
3. The block element can set the margin and padding properties.

In the actual process, we see a situation like this:

Here we have the HTML code as shown in:

CSS styles are as follows:

Over here. Our A-label display uses Inline-block, an object that is presented as an inline element, and the width adapts to its content. Does not monopolize the entire row. After changing to Display:block, the effect is as follows:

The width of label A here is exclusive to the line of the P label, and the width of its parent element is automatically populated.

This is what this article wrote, please pay attention to his differences.

The blocks and Inline-block found in the site creation process are different.