CSS : Display Property

The display property is the most important CSS property for controlling the layout of the HTML document. It is used to specify how an element is displayed. There are four possible values for display properties which are none, inline, block and inline-block. The default display value for most elements is inline.

Property values :
  • inline : The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element.
  • block : The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element.
  • inline-block : The inline value of the display property shows an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.
  • none : The element is completely removed.
Example :
<html>
<head>
  <style>
    p#demo {
      background-color: orange;
    }    
  </style>
</head>
<body>
  <p>display : inline</p><p id="demo" style="display:inline;">This is a test Paragraph.</p>
  <p>display : block</p><p id="demo" style="display:block;">This is a test Paragraph.</p>
  <p>display : inline-block</p><p id="demo" style="display:inline-block;">This is a test Paragraph.</p>
  <p>display : none</p><p id="demo" style="display:none;">This is a test Paragraph.</p>
</body>
</html>
Output :

display : inline
This is a test Paragraph.


display : block
This is a test Paragraph.

display : inline-block
This is a test Paragraph.


display : none


Next Topic :