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

display: inline

Hello! This is the paragraph with display: inline property.


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

display: inline-block

Hello! This is the paragraph with inline-block property.


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

display: block

Hello! This is the paragraph with display: block property.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved