ความแตกต่างระหว่าง display: none และ visibility: hidden

display: none

ซ่อนองค์ประกอบและ ไม่ครอบครองพื้นที่ ในเลย์เอาต์ องค์ประกอบอื่นจะปิดช่องว่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    h3 { display: none; }
  </style>
</head>
<body>
  <h2>This heading is visible</h2>
  <h3>This is a hidden heading</h3>
  <p>The hidden heading does not take up space.</p>
</body>
</html>

visibility: hidden

ซ่อนองค์ประกอบแต่ ยังครอบครองพื้นที่ ในเลย์เอาต์ ทำให้มีช่องว่างเหลืออยู่

<!DOCTYPE html>
<html>
<head>
  <style>
    h3 { visibility: hidden; }
  </style>
</head>
<body>
  <h2>This heading is visible</h2>
  <h3>This is a hidden heading</h3>
  <p>The hidden heading takes up space.</p>
</body>
</html>