Hide boxes

The visibility property allows you to hide boxes from users but it leaves a space where the element would have been. The property can take two values:

• hidden: This hides the element

• visible: This shows the element

If the visibility of an element is set to hidden, a blank space will appear in its place. If you do not want a blank space to appear, then you should use the display property with a value of none instead.

Do note that anyone can view the contents of any elements whose visibility property has been set to hidden by viewing the source in their browser.

HTML

<ul>
    <li>Home</li>
    <li>Products</li>
    <li class="coming-soon">Services</li>
    <li>About</li>
    <li>Contact</li>
</ul>

CSS

li {
    display: inline;
    margin-right: 10px;
}

li.coming-soon {
    visibility: hidden;
}

You can see the results here: