CSS display: inline-block

The display: inline-block property is used to display the list items horizontally instead of vertically, for example like horizontal and vertical navigation bar links with CSS display property.

Display Values

• display: inline - The display:inline value is used to display an element in inline.
• display: inline-block - The display:inline-block value is used to display an element in inline-block; also used to set a width and height on the element.
• display: block - The display:block value is used to display an element in block.

CSS display: inline Property

.inline_p {
     display: inline;
     background-color: green;
     width: 100px;
     height: 100px;
     padding: 10px;
     border: 1px solid black;
  }
.inline_d {
     padding: 10px;
     border: 1px solid #1d6792;
  }

Output

CSS display: inline-block Property

.inline_block_p {
     display: inline-block;
     background-color: green;
     width: 100px;
     height: 100px;
     padding: 10px;
     border: 1px solid black;
  }
.inline_block_d {
     padding: 10px;
     border: 1px solid #1d6792;
  }

Output

CSS display: block Property

.block_p {
     display: block;
     background-color: green;
     width: 100px;
     height: 100px;
     padding: 10px;
     border: 1px solid black;
  }
.block_d {
     padding: 10px;
     border: 1px solid #1d6792;
  }

Output