CSS display property

This lesson will help you understand the different vartion of display property like inline, block and inline-block and their usage and differences.

Quick Hands-on

Points to Remember

• Display property specifies the display behaviour of an element i.e how the element is going to be displayed in the page.

• It is required to implement the modern layout to work like flexbox and grid layout.

• Common values of display property: inline, block, inline-block, flex, grid, none and table

• Block level element:
  • Always starts on a new line
  • Browsers add margin before and after the element automatically
  • Always takes up the full width available.
  • Example: div, p, h1…h6, article, blockquote, footer, form, header, main, nav, hr, ul, ol, li, pre, section, table, video etc.

• Inline level element:
  • Doesn’t start on a new line
  • Only takes up as much width as necessary
  • Example: span, a, img, b, br, button, i, input, label, script, select, small, strong, sub, sup, textarea etc

• Inline-block level element:
  • As compared to inline level elements, with display inline-block elements, we can set height and width of the element.
  • As compared to display level elements, the inline-block element does not add line-break after the element and multiple inline-block elements sit next to each other.