CSS Layout Display Property

    display is one of the most important properties of CSS, and it is mostly used for manipulating the page layout.

    CSS display property

    As its name suggests the display property decide if and how an HTML element should be displayed on the browser. For most of the elements, the default value of display is block or inline . But this value is may vary from elements to elements.

    Block Elements

    The HTML element which always starts their content from a new line those elements are known as block elements. And by default, the block elements took the full length of the browser display. So for block elements, the display property value is block.

    Here are some examples of block elements:

    • <div>
    • All heading tags <h1> to <h6>
    • <p>
    • <form>
    • <header>
    • <li>
    • <footer>
    • <section>

    Inline elements

    The content of an inline content does not start from a new line. And these elements are generally used as a child element for a block element. The width of the inline elements depends on the requirement of the element. For inline elements the default value of display is inline

    Here are some examples of inline elements:

    • <span>
    • <a>
    • <img>

    CSS display property inline value

    With display property and inline value we can manipulate or override the default block value for an HTML block element. By default the display value for <li> element is block , that's why every list item come on a new line but using the display inline value we can create a Horizontal list instead of vertical.

    Example: 

    <html>
<head>
<style type="text/css">
  li{
    display: inline; 
   }
   </style>
</head>

   <body>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ol>

   </body>
</html>

    Preview

    item 1 item 2 item 3

    CSS display property Block value

    Using the display property and block value we can manipulate the inline element to a block element. By default the <span> is an inline element let's change its CSS styling to block.

    Example 

    <p>It's a Paragraph, welcome to 
<span style="display: block;">TechGeekBuzz</span>
</p>

    Preview

    It's a Paragraph, welcomes to TechGeekBuzz The <span> TechGeekBuzz starts from a new line, because of the display:block .

    CSS display property none value

    The display:none property is used to hide and show the HTML elements using JavaScript Events. As JavaScript is capable of manipulating static HTML documents and this CSS property can help it to hide and show any HTML element. The none value hides the element like there is none before, it's can also be said that the none value removes the element from the document. Which means when we hide any HTML element using display none value than the space occupied by the element also gets removed.

    Example 

     <p>Some random text on this <span style="display: none;">techgeekbuzz</span> paragraph is hidden</p>

    Preview 

    Some random text on this paragraph is hidden

    In the above example, you can see that techgeekbuzz has been hidden and the space occupied by it has also gone.

    visibility property with hidden value

    The visibility:hidden is also used to hide the HTML elements like display:none . But when we hide any element using visibility hidden then the element gets hide but space occupied by the elements remains there.

    Example: 

    <p>Some random text on this 
   <span style="visibility: hidden;">techgeekbuzz</span> 
    paragraph is hidden
 </p>

    Preview

    Some random text on this techgeekbuzz paragraph is hidden

    Summary

    • display property is used to change the layout of any element.
    • The content of every block element starts from a new line.
    • The content of inline elements does not start from a new line.
    • The HTML inline and block elements property can be manipulated with display property and inline & block values.
    • The display:none hide the element by removing it.
    Previous Tutorial Next Tutorial