We can choose between two different approaches to hide elements.

<html>
<head>
<style>.box {background-color: gray;width: 50px;height: 25px;border: 1px solid black;}#box1 {visibility: hidden;}#box2{display: none;}</style></head><body><div class="box" id="box1"></div><div class="box" id="box2"></div></body>
</html>
]]>

Poof! Using visibility, the element is hidden but still takes up space; using display, the web page is displayed as if the element didn't exist.

Maybe we can only use none with the display property?