CSS: How to use the display property

Here is what w3schools.com says about the CSS display property:

The display property specifies the display behavior of an element.

Note: Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves.

There are multiple settings that can be used with the CSS display property. Here are a few for example:

display: none;
display: inline;
display: block;
display: inline-block;
display: grid;
display: flex;

The first four on this list are illustrated nicely here:

display: none; will not display the value.

display: inline; will display the value in line with surrounding text.

display: block; will break the surrounding text to display the value as its own seperate block.

display: inline-block; acts just like display: inline;.

display: grid; is used with the CSS grid property.

See: https://www.w3schools.com/cssref/pr_grid.asp

display: flex; is used with the CSS flexbox property.

See: https://www.w3schools.com/cSS/css3_flexbox.asp

Example of usage:

.info .btn {
   display: block;
   text-align: center;
   margin: auto;

For more information about the CSS display property and a complete list of possible values, see: