Concept

display is an important property in CSS used to control the display structure of a block, usually exists in the following two forms:

• block :
• This property will create a new row
• Occupies all the space horizontally of that row
• Does not accept other elements on the same row
• The height of the block will flexibly adjust according to the content inside
• Example tags: div, p, h1 - h6, etc.

• inline / inline-block :
• Usually inside other text tags
• Cannot interfere with the size of the block.
• Example tags: span, a, img, etc.

How to use

example

HTML

//block
<p>Hello</p>

//inline-block
<p class="box">Say</p>
<p class="box">Hi</p>

CSS

.box{
  display:inline-block;
}

Result

In the example above, the p tag with content Hello will have a default display of block, so this tag will occupy the entire row, while the next 2 p tags, because they have intervened class to convert to inline-block, can be in the same row.