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.
<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
<img /> tags.
CSS provides tools to control the element visual formatting model by setting
opacity properties. This article describes the
visibility control properties, provides examples and use cases.
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
display property example
Get every image on the page a block element:
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:
The element will keep its place in the text line, but also affected by height and width properties.
flex display value
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:
none display value
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
visibility property is designed to control visibility of the element.
The property may take the following values:
visibleis 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.
display: none and
visibility: hidden rules
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.
The opacity allows developers to configure the opacity level of the element.
It may take any value between
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