CSS: The display property
Tags: css, webdev
Published: 2023-02-19 12:41:43

> 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.


![CSS Properties of HTML Table element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvgo5oz3tz3gct6q8ct7.png)



## Definitions

My suspicions are confirmed when I research [w3schools.com](https://www.w3schools.com/cssref/pr_class_display.php). 

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.

![Animated gif of the inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xfzgkjk2r2dox11h7bm.gif)


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



![Animated gif of the inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x93m92v6k46egnie9127.gif)



...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"
```