Khác biệt giữa CSS Display và Visibility

Chúng ta có thể ẩn hoặc xóa một phần tử trong tài liệu HTML với CSS Visibility và CSS Display tương ứng. Đối với người dùng, có vẻ không có sự khác biệt khi sử dụng hai thuộc tính này, nhưng thực tế CÓ khác biệt lớn.

CSS Display: none - Không render phần tử trên tài liệu và do đó KHÔNG cấp phát không gian cho nó.

CSS Visibility: hidden - Vẫn render phần tử trên tài liệu và CẤP PHÁT không gian, nhưng KHÔNG làm cho nó hiển thị cho người dùng.

Ví dụ 1: CSS Display none

<!DOCTYPE html>
<html>
<head>
<title>CSS Display None</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; box-sizing: border-box; }
  input[type="button"] { border-radius: 10px; }
  .child { display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Display-None</legend>
      <div id="container">
        <div class="child"></div><div class="child primary"></div><div class="child"></div>
        <div class="child"></div><div class="child primary"></div><div class="child primary"></div>
      </div><br>
      <input type="button" value="Hide Primary Colors" onclick="displayNone()">
    </fieldset>
  </form>
  <script>
    var primaryColor = document.getElementsByClassName('primary');
    function displayNone() {
      for (var i = 0; i < 3; i++) primaryColor[i].style.display = 'none';
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn 'Hide Primary Colors':

Sau khi nhấn 'Hide Primary Colors' - các ô bị xóa hoàn toàn, không gian bị thu hẹp:

Ví dụ 2: CSS Visibility hidden

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; box-sizing: border-box; }
  input[type="button"] { border-radius: 10px; }
  .child { display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Visibility-hidden</legend>
      <div id="container">
        <div class="child"></div><div class="child primary"></div><div class="child"></div>
        <div class="child"></div><div class="child primary"></div><div class="child primary"></div>
      </div><br>
      <input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
    </fieldset>
  </form>
  <script>
    var primaryColor = document.getElementsByClassName('primary');
    function visibilityHidden() {
      for (var i = 0; i < 3; i++) primaryColor[i].style.visibility = 'hidden';
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn 'Hide Primary Colors':

Sau khi nhấn 'Hide Primary Colors' - các ô mờ đi nhưng VẪN GIỮ NGUYÊN KHÔNG GIAN:

Bảng so sánh tóm tắt: