Languages

CSS - display:none vs visibility:hidden

3 points
Asked by:
Wiktor-Sribiew
320

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
320

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
320

Visibility hidden

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      height: 50px;
      width: 50px;
      background: deepskyblue;
      border-radius: 5px;
      margin: 5px;
    }
    
    .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 {
      height: 50px;
      width: 50px;
      background: deepskyblue;
      border-radius: 5px;
      margin: 5px;
    }
    
    .middle-div {
      display: none;
    }
    
  </style>
</head>
<body>
  <div></div>
  <div class="middle-div"></div>
  <div></div>
</body>
</html>
0 comments Add comment
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