Popular understanding of inline, block, Inline-block

Display:inline; Inline elements, in simple terms, are displayed on the same line.

Display:block; A block-level element, which simply means that there is a newline and will be changed to the second line.

Display:inline-block; is the block-level element within the same row.


<a href= "#" style= "Display:inline;width:100px;height:100px;background: #ccc;" > Link One </a>

<a href= "#" style= "Display:inline;width:100px;height:100px;background: #ccc;" > Link One </a>

The default is inline, so inline is useless here. The wide height setting is also obsolete.

<a href= "#" style= "Display:block;width:100px;height:100px;background: #ccc;" > Link One </a>

<a href= "#" style= "Display:block;width:100px;height:100px;background: #ccc;" > Link One </a>

block, where the high width is effective, but because it is a block (a newline character before and after), so this is two lines.

<a href= "#" style= "Display:inline-block;width:100px;height:100px;background: #ccc;" > Link One </a>

<a href= "#" style= "Display:inline-block;width:100px;height:100px;background: #ccc;" > Link One </a>

This means that the block is reached at the same time, and the setting is highly effective and displayed on the same line.

Popular understanding of inline, block, Inline-block