Skip to content

The CSS Display property

New Course Coming Soon:

Get Really Good at Git

How to work with the `display` property in CSS

The display property of an object determines how it is rendered by the browser.

It’s a very important property, and probably the one with the highest number of values you can use.

Those values include:

plus others you will not likely use, like ruby.

Choosing any of those will considerably alter the behavior of the browser with the element and its children.

In this post I’ll analyze the most important ones not covered elsewhere:

I cover others in separate posts:


Inline is the default display value for every element in CSS.

All the HTML tags are displayed inline out of the box except some elements like div, p and section, which are set as block by the user agent (the browser).

Inline elements don’t have any margin or padding applied.

Same for height and width.

You can add them, but the appearance in the page won’t change - they are calculated and applied automatically by the browser.


Similar to inline, but with inline-block width and height are applied as you specified.


As mentioned, normally elements are displayed inline, with the exception of some elements, including

which are set as block by the browser.

With display: block, elements are stacked one after each other, vertically, and every element takes up 100% of the page.

The values assigned to the width and height properties are respected, if you set them, along with margin and padding.


Using display: none makes an element disappear. It’s still there in the HTML, but just not visible in the browser.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: