Facing the CSS: Display

Photo by Christopher Jolly on Unsplash

Psst! This blog is a continuation of Facing the CSS: Padding! Feel free to check it out if you haven’t yet.

Another week, another CSS lesson. This time around, I’ve been familiarizing myself with the display property. What is display? Let’s look to our lord and savior, W3 Schools, for some guidance.

The display property specifies the display behavior (the type of rendering box) of an element.

To start using the display property, we would use the syntax:

css selector {
    display: value;
}

Here are some of the popular values and their examples below:

none

The none value completely removes the element from the document.

ul {
    display: none;
}

list-item

The list-item value lets the element behave like a <li> element.

p {
    display: list-item;
}

inline

inline displays an element as an inline element (like <span>). Any height and width properties will have no effect.

img {
    display: inline;
}

block

block displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width.

h1 {
    display: block;
}

flex

The flex value displays an element as a block-level flex container.

div {
    display: flex;
}

grid

grid displays an element as a block-level grid container

span {
    display: grid;
}

inline-block

inline-block displays an element as an inline-level block container. The element itself is formatted as an inline element, but unlike inline, you can apply height and width values.

span {
    display: inline-block;
}

Check out more display values over at W3 Schools! Happy coding!