Languages
[Edit]
EN

CSS - hide element

0 points
Created by:
sienko
323

In this article, we would like to show you how to hide element using CSS.

Quick solution:

div {
  display: none;
}

or:

div {
  visibility: hidden;
}

Note:

Analyze the below examples to see the difference between the two solutions.

 

 

1. Practical example using display: none

By setting the display property to none the element will be hidden and the page will be displayed as if the element is not there.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>

      div.visible {
        padding: 5px;
        border-radius: 10px;
        background-color: #3085d6;
        color: white;
      }

      div.hidden {
        display: none;
      }

    </style>
  </head>
  <body>
    <div class="hidden">hidden div</div>
    <div class="hidden">hidden div</div>
    <div class="hidden">hidden div</div>
    <div class="visible">visible div</div>
  </body>
</html>

 

2. Practical example using visibility: hidden

By setting the visibility property to hidden the element will be hidden, but it will still affect the layout by taking up the same space as before.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>

      div.visible {
        padding: 5px;
        border-radius: 10px;
        background-color: #3085d6;
        color: white;
      }

      div.hidden {
        visibility: hidden;
      }

    </style>
  </head>
  <body>
    <div class="hidden">hidden div</div>
    <div class="hidden">hidden div</div>
    <div class="hidden">hidden div</div>
    <div class="visible">visible div</div>
  </body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join