12. Display

There are moments, when we lay out pages, when we need to change the nature of a tag, making an inline element become a block element or vice versa. For that we have the display style.

But first we must understand, why would we need to alter its properties? A very common case is when we work with hyperlinks. For user experience reasons, the UX/UI designer will ask us to give it a larger clickable area. That way, we would opt to give it a larger width.

a {
    background-color: yellow;
    width: 30rem;
    text-align: center;
}

However, we won't perceive any change. This is because inline elements are not affected by padding or dimension properties. Therefore we will modify its display to turn it into a block and thus be able to manage it.

a {
    display: block;
    background-color: yellow;
    width: 30rem;
    text-align: center;
}

Hiding

If we want to make a tag disappear completely from the design, we can use the value none. Very useful when we don't want to show elements until an event or animation occurs. For example, making a smartphone menu appear when a button is pressed.

.elemento {
    display: none;
}

Multi-word syntax

The current values, despite being included in the standard, are only compatible with Firefox! Therefore we must ignore them and move on to the next section.

.elemento {

    /* Block */
    display: block flow;
    /* Inline */
    display: inline flow;
    display: inline flow-root;

    /* Block capability but positioned inline */
    display: block flow-root;

    /* Flex in block: Focused on layout */
    display: block flex;
    /* Flex inline: Focused on layout */
    display: inline flex;

    /* Grid in block: Focused on layout */
    display: block grid;
    /* Grid inline: Focused on layout */
    display: inline grid;
}

Precomposed (inherited) values

They are compatible with all browsers since they were part of the standard in the past. In addition, they are kept for backward compatibility reasons.

.elemento {

    /* Block */
    display: block;
    /* Inline */
    display: inline;

    /* Block capability but positioned inline */
    display: inline-block;

    /* Flex in block: Focused on layout */
    display: flex;
    /* Flex inline: Focused on layout */
    display: inline-flex;

    /* Grid in block: Focused on layout */
    display: grid;
    /* Grid inline: Focused on layout */
    display: inline-grid;
}

Content visibility

In 2024 the content-visibility property was standardized. It lets you control the rendering of an element and its content. In practice it achieves the same as display: none, in appearance, but with certain advantages:

• The content is not rendered. Therefore the size of the box and its internal elements are not calculated, achieving faster loading.
• It does not penalize SEO. It is not necessary to play with the aria-hidden or hidden tags to prevent search engines from indexing hidden content.
• You can monitor its state with JavaScript. You can know whether it is visible or not in a simple way, without resorting to reading its CSS properties.

To hide an element and its content, simply add the property content-visibility: hidden.

.elemento {
    content-visibility: hidden;
}

If you want to show it.

.elemento {
    content-visibility: visible;
}

The auto property is the one applied by default. No optimization is applied and the browser renders the content normally.

.elemento {
    content-visibility: auto;
}

More information