CSS: Visibility Control Properties

One of the fundamental concepts of CSS is the visual formatting model. Put it simply, every element is displayed as a rectangular box and they all fall into two main categories – block-level and inline-level. Block elements are generated with breaks before and after it so the element siblings go above and below. <p>, <h1> and <div> tags are block elements. Inline elements are generated within a line of text and don’t break up the flow of the line. Examples of inline elements are <a>, <button> or <img /> tags.

CSS provides tools to control the element visual formatting model by setting display, visibility and opacity properties. This article describes the visibility control properties, provides examples and use cases.

CSS display property

The most common property to configure the display type or visibility of elements. The property can take lots of values, but most of them refer to either inline-level or block-level. Also, there are some values that let one specify the display behavior of the element’s children. Such as table, flex or grid.

CSS display property example

Get every image on the page a block element:

img {
  display: block;
}

inline-block display value

Inline-level elements aren’t affected by height or width properties. But if you want to set custom height or width to inline element, you can use the inline-block value on it:

a {
  display: inline-block;
  height: 30px;
  width: 120px;
}

The element will keep its place in the text line, but also affected by height and width properties.

flex display value

The flex value enables to control the elements children flow by the flex control properties. This example shows how to set a <div> as a flex container and make its children align out in vertical column:

div {
  display: flex;
  flex-direction: column;
}

none display value

Display none property is used to make elements invisible and remove them from the visual formatting model. In this example, display: none rule is applied to all the elements with hidden class:

.hidden {
  display: none;
}

CSS visibility property

The visibility property is designed to control visibility of the element. The property may take the following values:

• visible is the default value;
• hidden. If the value is applied the element gets hidden, but space the element would have taken is preserved;
• collapse. if applied on the table row and column tags, the adjusted element is removed from the document layout. Size of other rows and columns is calculated as if the cells in the collapsed rows and columns are still present. If the value is applied to any other element, the effect will be the same as for the hidden value.

Comparison of display: none and visibility: hidden rules

The display: none rule removes the element from the layout completely. The space occupied by the element is collapsed when the rule is applied. On the other hand, the visibility: hidden rule makes the element invisible, but the layout is still affected by the element. In both cases, the element doesn’t respond to DOM events and gets invisible for screen readers.

CSS opacity property

The opacity allows developers to configure the opacity level of the element. It may take any value between 0 and 1, where 0 is completely transparent, 0.5 is semi-transparent and 1 is opaque. The opacity level is applied to the entire element and its children nodes. The adjusted element isn’t removed from the layout, if the opacity level equals to 0; and keeps responding to the DOM events.