Web Design IV Concepts

CSS Display and Visibility

Displaying, Opacity and the Visibility of elements in a document is a very important concept to grasp. All of these determine visibility and all properties differ on other values and outputs.

These are the possible properties that affect these are:

display
visibility
opacity
opacity: number

display

The display property specifies the display behaviour (the type of rendering box) of an element)

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value n XML is inline, including SVG elements.

Below are the possible values:

none - The element is completely removed.
inline - Displays an element as an inline element (like span). Any height and width properties will have no effect.
block - Displays an element as a block element (like p). It starts on a new line, and takes up the whole width.
flex - Displays an element as a block-level flex container.
grid - Displays an element as a block-level grid container.
contents - Makes the container disappear, making the child elements children of the element the next level up in the DOM.
list-item - Let the element behave like a li element.
table - Let the element behave like a table element.
run-in - Displays an element as either block or inline, depending on context.

visibility

The visibility property specifies whether or not an element is visible.

Visible elements still take up space on webpages. Visibility is like opacity but with only two values.

visible - Default. The element is visible.
hidden - The element is hidden (it still takes up space).

opacity

The opacity property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all (opaque), 0.5 is 50% see-through and 0 is completely transparent.

Conclusion

So yes, there are many ways to specify visibility. Using display:none; will make the element invisible and also lose the space it takes up whilst using visibility:hidden; and opacity:0; will hide the element but the space will still be there.

Sources: (click on them to see them)

Web Design Visibility Concepts