Understanding CSS: visibility:hidden vs. display:none

Introduction to CSS Visibility and Display Properties

In web development, controlling the appearance of elements is crucial for creating dynamic user interfaces. Two common CSS properties used for hiding elements are visibility:hidden and display:none. Though both achieve similar outcomes by making an element invisible, they behave differently in terms of layout and interaction. This tutorial will explore these differences and provide examples to illustrate their usage.

The Difference Between visibility:hidden and display:none

Display Property: display:none

The display:none property completely removes the element from the document’s flow. When an element is set to display:none, it becomes invisible, and no space is allocated for it in the layout. This means that other elements will move into its place as if the hidden element never existed.

Example:

<p>test | <span style="display:none;">Invisible Text</span> | test</p>

Output:

• The text "Invisible Text" is not visible, and there is no space allocated for it. The words "test" are adjacent to each other.

Visibility Property: visibility:hidden

On the other hand, visibility:hidden hides the element but keeps its space in the layout. This means that while the element is invisible, it still occupies space on the page as if it were visible.

Example:

<p>test | <span style="visibility:hidden;">Invisible Text</span> | test</p>

Output:

• The text "Invisible Text" is not visible, but space is reserved for it. You’ll notice a gap between the words "test".

Practical Implications

Interaction with Document Flow

When using display:none, other elements will reflow to fill in the space where the hidden element was located. This is useful when you want elements to occupy the available space without any gaps.

In contrast, visibility:hidden maintains the layout structure by preserving the element’s space, which can be beneficial if maintaining consistent spacing and alignment is important.

Impact on Child Elements

The behavior of these properties extends to child elements as well. If a parent element has display:none, all its children are also hidden from view because they are removed from the document flow.

However, with visibility:hidden, child elements can remain visible if their visibility property is set explicitly.

Example:

<!-- Using display:none -->
<div style="display:none;">
    <div>This text will not be shown.</div>
</div>

<!-- Using visibility:hidden -->
<div style="visibility:hidden;">
    <div style="visibility:visible;">This text will still show up!</div>
</div>

Other Considerations

Opacity as an Alternative

A third method to hide elements while keeping their space is by using opacity:0. This makes the element fully transparent but not removed from the document flow. The element can still be interacted with, such as through mouse hover or clicking.

Example:

<a href="http://example.com" style="opacity: 0;">Invisible Link</a>

Here, while invisible, the link’s text is still selectable and its events can be triggered programmatically. This might be useful for watermarking or other interactive purposes.

Conclusion

Understanding the differences between visibility:hidden and display:none helps in making informed decisions about how to manage element visibility on a webpage. Whether you want an element entirely removed from layout (display:none) or just hidden while preserving its space (visibility:hidden), choosing the right property is key to achieving your design goals.

Best Practices

• Use display:none when you need to remove elements completely and allow others to occupy their space.
• Opt for visibility:hidden when maintaining layout spacing is important.
• Consider using opacity:0 if interaction with a hidden element is required.

By understanding these properties, developers can create more responsive and visually appealing web applications.