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!

--

--

--

Laotian-American woman pursuing my passion for mentally stimulating and complex problem-solving through programming.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chindalath Traymany

Chindalath Traymany

Laotian-American woman pursuing my passion for mentally stimulating and complex problem-solving through programming.

More from Medium

What’s the need for ID verifications and Instant Checks?

Chia network efficiency comparison to BTC and ETH

HTML for Kids

How Aquariums and Marine Sea Animal Parks Aid Ocean Conservation