Login With Github

CSS Display And Visibility

The display and visibility properties are the two very important properties in CSS layout. They are mainly used to control the display of elements.

The display property

The display property determines how the element is displayed.

Each HTML element has a default display value. The default display value for most elements is block or inline.

Generally speaking, the default display value of an HTML block-level element is block, and the default display value of an HTML in-line element is inline. All block-level elements and in-line elements are listed here.

Of course, you can change the default display value of the element.

For example, you can set the value of the display property of the <li> element to inline to implement a horizontal menu:

li {
    display: inline;
}

You can also set the value of the display property of the <span> element to block and specify the width and height:

span {
    display: block;
    width: 80px;
    height: 50px;
}

Note: Setting the display property of an element merely changes the way the element is displayed and doesn't change the type of the element itself.

If you want the element to disappear from the page, you can set its display property to none:

p.none {
    display: none;
}

The visibility property

The visibility property can change the visibility of an element in the view.

We set the visibility property of the second <p> element to hidden in the following example:

<html>
   <head>
   </head>
   <body>
      <p>
      This paragraph should be visible in normal way.
      </p>
   
      <p style="visibility: hidden;">
      This paragraph should not be visible.
      </p>

      <p>
      This paragraph should be visible in normal way.
      </p>
   </body>
</html>

You will see the text of the second paragraph disappeared. However, the page still retains layout space for that paragraph.

Hide element - use display: none or visibility: hidden

Although using display: none and visibility: hidden both can hide elements, the difference between them is:

  • display: none - It is used to hide elements and does not reserve layout space for them.
  • visibility: hidden - It is used to hide elements and reserves layout space for them.
<html>
   <head>
   </head>
   <body>
      <p>
      This paragraph should be visible in normal way.
      </p>
   
      <p style="visibility: hidden;">
      This paragraph should not be visible.
      </p>

      <p>
      The pre paragraph is hidden but still has layout space.
      </p>

      <p style="display: none;">
      This paragraph should not be visible.
      </p>

      <p>
      The pre paragraph is hidden and removed layout space.
      </p>
   </body>
</html>

You can also use JavaScript to dynamically modify the property values of Display and Visibility ​​to achieve a cooler layout effect.

1 Comment

temp

Thanks so much, I've already messed up with display matter. But this post helped me out! Thx so much.