CSS: The display property

The goal of this post is to provide you with some basic (really basic) understanding of the display CSS property. Rudimentary, foundational... Advanced users need not apply.

Today I took industriousness to produce the following HTML file.

<p>Behold, a bunch of pixels</p>

I decided to go the extra mile and write two more lines.

<div>Behold, another bunch of pixels</div>

<span>Yet another group of pixels</span>

I am on a mission to understand the CSS property display, which brings me to right-clicking and the "inspect" option of my browser, and this is what I see:

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

It seems that even a simple paragraph element comes with a number of default CSS properties, among them my beloved display.

First logical conclusion

display: block is a default property of the paragraph element.

Tinkering around, it is easy to discover that this is not the case for the span element, though it is for the div element.

Down the display rabbit hole

What is this mysterious thing that appears in some CSS elements?

The fact that it comes as a default property in elements like paragraph and div tells me that it is something foundational, as if putting legs under a table, even if the table has no specific use yet.

Different elements, different values

This is an experiment to run: create different types of HTML elements, and inspect which CSS properties do they incorporate.

We quickly discover that the <table> HTML element, has the display: table value.

Definitions

My suspicions are confirmed when I research w3schools.com.

First I learn that display: block displays an element as a block element (the css version of duh!)

A block element starts on a new line, and takes up the whole width.

display: table displays an element as a table element.

Now, that's useful info when it comes to formatting my CSS elements. I need my elements to behave in a specific way. So...

What other values can display take?

Short answer: a whole bunch.

All of the available display values can be grouped in the following categories:

• Values that display an element as a certain type of CSS container
• Values that let the element behave like a certain type of CSS element

We also have a few outliers:

display: none removes the element

display: initial sets the property to its default value

display: inherit inherits this property from its parent element.

display: contents is some David Copperfield number. Not even going to pretend I fully understand it, let alone do a decent job at explaining it.

Examples in action

Let's take our paragraph element, which comes with the display: block default, and mess about slightly. If we open the inspector and change the block value for the inline value.

According to w3schools, inline will make the element behave like an inline element: height and width properties will have no effect.

What happens if we change to display: none? It should remove the element...

...and it does!

My working definition:

The display property allows our CSS elements to be displayed as a certain type of CSS container or behave like a certain CSS element.

...it can also do a few other things: make the element invisible, reset or inherit certain properties, and modify the child-parent relationship.

Containers, elements, children, parents, and inheritances

I have only scratched the surface of the display property in this post.

In order to fully deploy the power of this property, one needs to understand the inner workings of CSS containers and elements: flex, grid, lists, columns, rows, how the properties are inherited... and the DOM.

I have just started my journey with CSS, so here is where I bow, thank you for your time, and hope that this helped you understand the display property enough just so you and I can keep layering knowledge on top.

Thank you for reading!

git add .
git commit -m "My respect to people who design purely with CSS"