CSS Display Property Part 1: Understanding it's 6 Values in detail

This post’s video is no longer on YouTube. The notes below are the post.

Unraveling the CSS Display Property: Part 1

This first installment focuses on dissecting and understanding the foundational values: block, inline, inline-block, inherit, initial, and none.

Detailed Value Breakdown

Explore each value in-depth as we unravel how "block" and "inline" elements function, the versatility of "inline-block," and how "inherit," "initial," and "none" impact element behavior.

Learning Guide

This session provides a reference guide, elucidating the behavior of elements when the "display" property is set to "initial," referring to specifications detailed here: CSSWG Reference Guide.

Https://drafts.csswg.org/css-display/#the-display-properties

Connect With Zaions

For more coding insights and tutorials, visit our Zaions Portfolio Website.

Https://zaions.com/bio

Want us to build yours instead?

On a project, every milestone ends with a link to the working build, and the code, the accounts and every password are yours at the handover.

What we’d build for you is on Services.

Send us the brief, or start with the free call.

Page updated .

Privacy preferences

Choose whether this browser sends visit data to our analytics tools. The site works the same either way.

Google Analytics, Amplitude and Microsoft Clarity show us which pages get read. Off means none of the three loads.

Always on

Sentry error reports, with personal data removed, and the Cloudflare spam check on the brief form.

Each cookie is listed in our Cookie Policy.