Display: inline, inline-block, and block elements

Block Element display: Block

1. I am a block-level element and always start in a new row.

2. width, height, row height, and top and bottom can be controlled. (The default value is 100% of the width and height of the container)

3. My vertical adjacent margins are merged. The maximum value is used by default.

Inline element display: inline

1. I am an in-row element, and other elements are on the same line.

2. The width, height, row height, and top and bottom cannot be changed. (The default value is its own width and height)

3. I have upper and lower margins, but my left and right margins won't be merged.

Inline-Block Element(Between inline and block elements)

1. I am an inline-block element, and I am an inline object, but the content in me is presented as a block object. The Inline object next to it is displayed in the same row.

2. width, height, row height, and top and bottom can be controlled.

3. Like inline elements, there is a gap between the elements by default.

Next articleArticleAs described in:How to remove the spacing between inline-block elements