The display and visibility properties
can be very useful for responsive design
and to add a bit of functionality to a web site. You can use both to
show and hide elements, and you can use the display
property to change how elements and/or their contents behave in
different layout scenarios.
Pre-Requisites
Before doing this tutorial, it is recommended that
you first read about responsive design.
It's also helpful if you understand the basics of
media queries.
The Display Property
The display property is used to change the
layout behaviour of an item, and also to show/hide
an element. It can also be used to define how the layout of the element's
children will behave. We'll talk about showing and hiding elements in the last
section of this lesson. For layout, the display
property can define whether or not an element behaves as a block
element or an inline element, or whether or not it's a
FlexBox container or
Grid container.
The possible values for the display property are:
Defining the layout behaviour of the element itself:
block: makes the element behave as a block element.
inline: makes the element behave as an inline element.
inline-block: makes the element behave like an inline
element but maintains some characteristics of block elements.
Defining the layout of the element's children:
table: the element behaves like
an HTML table, but you have to use
it with children that are assigned display properties that
are part of the same table display model. Here
is a CodePen example that uses the display:table model compared to
a regular HTML table. Note that you should only use the display:table
model if you have a specific need to, otherwise you should use
a regular HTML table for displaying tabular data.
One very common use of the display property is to
change an element's behaviour as a block or inline element. For example,
in a responsive page or app,
you might want links in a navigation bar to appear stacked vertically
when the screen is small, and to appear in a horizontal row when
the screen is wider. This can be done by changing the display
property in a media query:
In this example, the links are styled as block elements by default,
and when the screen reaches a size of 758px in width or higher, they
change to inline elements.
The inline-block Value
So what the heck is the inline-block value for?
Sometimes you want to display block elements as inline elements, but you
still need to treat them as block elements. For example, inline elements
can't be assigned width or height in CSS, and they don't have top or
bottom margins or padding. Using inline-block defines
an element to display inline, but you can still set its height, width, and
top or bottom margin/padding.
Examine the following CodePen below: There are three <div> elements
inside a <section> and all three divs are set with display:
block;. This does nothing spectacular: DIV elements are already
block elements, so using display: block on them is redundant.
However, change the declaration to display: inline;
and watch what happens.
Notice that even though I defined each <div> with a height and width
of 200px, none of the divs are 200px in width or height anymore:
for inline elements, the width is always the width the element needs to fit
its contents, and the height is the standard line height. That's why
you see the <div> elements overlapping each other vertically (without
the purple borders, they would just look like a paragraph of text).
Notice also that the top and bottom padding are now being ignored, although
you can still see that the left/right padding is being respected. The
same is true with the top/bottom margin: it is no longer being used, but
the right/left margin is still there. You can tell because the text content
is flowing naturally with the natural line height, and there is normal space
between the lines of text. But you can still see the left/right gaps
between the left/right borders (margin) and the inner edges of the borders
and the text content (padding).
Now change the declaration to display: inline-block;.
You'll notice that the height and width of the <div> elements returns,
as does all the margin and padding, but the elements are displayed
side-by-side as inline elements would be displayed.
The inline-block element is useful when you want
to display block elements inline but you need to keep height/width
and/or margins/padding on top and/or bottom.
Here's a similar example with nested DIV elements:
Notice that when you change display: block to
display: inline for for the nested div element, it
flows with the rest of the text content inside the outer <div>.
It also loses it's top/bottom margin and padding.
Now change inline to inline-block and
you can see how the top/bottom margins and padding comes back.
The display property has a few other values for
more advanced formatting that you can check out in the
MDN: display
property documentation.
Showing/Hiding Elements
Showing and hiding elements is a useful thing to be able to
do: If you've seen web pages with a bunch of clickable tabs
that show different pages of content, you've seen this working!
Showing and hiding elements can be done with the display: none
declaration and also with the visibility property.
The visibility Property
The visibility property changes the visibility of an element
(duh). It can take one of 3 values:
visible: the item is visible
hidden: the item is hidden, it is not visible
the element is still used by the layout, it is still taking up space
it would normally use if visible
note that any childen in the element with
display: visible will still appear
collapse: this value only works on table rows/columns,
table row/column groups, or flex items: these items are hidden and
they don't take up space in the layout
In the CodePen below there are three <div> elements, but on the
second/middle div, I've set visibility: hidden;. You can
see that the div does not appear, but you can see the big gap between
the first and third <div> elements: that's where the second/middle
<div> is sitting. Even though it's not visible, it is still taking
up space: it is still part of the document flow.
Go into the CSS tab and comment out display: hidden;
and uncomment the line with display: none;
After making this change, you'll see that the space with the middle
div collapses, leaving the first and third div elements side-by-side.
So if you want to hide an element completely, you can use
display: none, and if you want to hide an element but not
allow other elements to take up the space, you can use
visibility: hidden.