Languages

CSS - display:none vs visibility:hidden

3 points
Asked by:
Wiktor-Sribiew
620

The display and visibility properties determine the display of an element - what are the differences between display: none and visibility: hidden?

2 answers
6 points
Answered by:
Wiktor-Sribiew
620

Both properties are similar but:

  1. visibility: hidden makes the element invisible but takes up the empty space it occupied.
  2. display: none makes the item hidden and doesn't even leave an empty space behind it.

Below you will see how they work in practice:

0 comments Add comment
0 points
Answered by:
Wiktor-Sribiew
620

Visibility hidden

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
        margin: 5px;
        border-radius: 5px;
        background: deepskyblue;
        width: 50px;
        height: 50px;
    }
    
    .middle-div {
        visibility: hidden;
    }
    
  </style>
</head>
<body>
  <div></div>
  <div class="middle-div"></div>
  <div></div>
</body>
</html>

Display none

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
        margin: 5px;
        border-radius: 5px;
        background: deepskyblue;
        width: 50px;
        height: 50px;
    }
    
    .middle-div {
        display: none;
    }
    
  </style>
</head>
<body>
  <div></div>
  <div class="middle-div"></div>
  <div></div>
</body>
</html>
0 comments Add comment
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
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