CSS Display Cheatsheet

The display property controls how an element behaves in the layout and how its children are arranged.

Access software development training resources

Here are CSS cheat sheets you should know.

Basic Syntax

selector {
  display: value;
}

Example:

.box {
  display: flex;
}

1. display: block

Takes the full available width and starts on a new line.

div {
  display: block;
}

Characteristics:

✅ Starts on a new line
✅ Width defaults to 100%
✅ Can set width/height
✅ Stack vertically

Examples:

<div>One</div>
<div>Two</div>

Common block elements:

<div>
<p>
<h1>–<h6>
<section>

2. display: inline

Only occupies content width.

span{
   display:inline;
}

Characteristics:

✅ Stays in same line
✅ Width/height ignored
✅ No line break

Example:

<span>Hello</span>
<span>World</span>

3. display: inline-block

Hybrid of inline + block.

.card{
   display:inline-block;
}

Characteristics:

✅ Appears inline
✅ Width and height work
✅ Can have padding/margins

Example:

button{
   width:150px;
   height:50px;
   display:inline-block;
}

4. display: none

Completely removes element from page flow.

.hidden{
   display:none;
}

Characteristics:

❌ Not visible
❌ Takes no space
❌ Removed from layout

Example:

.mobile-menu{
   display:none;
}

Toggle with JS:

menu.style.display="block";

5. display: flex

Creates a flexible one-dimensional layout.

.container{
   display:flex;
}

Useful properties:

.container{
   display:flex;
   justify-content:center;
   align-items:center;
   gap:20px;
}

Main axis controls:

justify-content:
center
space-between
space-around
space-evenly
flex-start
flex-end

Cross-axis:

align-items:
center
stretch
flex-start
flex-end

Example:

<div class="container">
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>

6. display: inline-flex

Flex container behaves inline.

.badge{
   display:inline-flex;
   align-items:center;
}

Useful for:

• Tags
• Pills
• Small UI components

7. display: grid

Creates a two-dimensional layout.

.container{
   display:grid;
}

Example:

.container{
   display:grid;
   grid-template-columns:
   repeat(3,1fr);

   gap:20px;
}

Example HTML:

<div class="container">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>

Useful properties:

grid-template-columns
grid-template-rows
gap
place-items
grid-column
grid-row

8. display: inline-grid

Grid behaves like inline element.

.tags{
   display:inline-grid;
}

Rarely used but useful in compact layouts.

9. display: contents

Makes the element disappear visually while keeping children.

.wrapper{
   display:contents;
}

Before:

<div class="wrapper">
   <p>One</p>
   <p>Two</p>
</div>

Wrapper no longer affects layout.

Use carefully.

10. display: table

Makes elements behave like HTML tables.

.container{
   display:table;
}

Related values:

display:table-row;
display:table-cell;
display:table-caption;

Example:

.row{
   display:table-row;
}

.cell{
   display:table-cell;
}

11. display: list-item

Behaves like <li>.

div{
   display:list-item;
}

Adds list markers:

div{
   display:list-item;
   list-style:square;
}

12. display: flow-root

Creates a new block formatting context.

Useful for fixing float issues.

.container{
   display:flow-root;
}

Instead of:

.clearfix::after{
 content:"";
 clear:both;
 display:block;
}

Use:

.container{
   display:flow-root;
}

Quick Comparison Table

Create Pie Charts in CSS

Value	New Line	Width/Height	Layout Type
block	Yes	Yes	Vertical
inline	No	No	Content only
inline-block	No	Yes	Hybrid
none	No	No	Hidden
flex	Yes	Yes	1D Layout
grid	Yes	Yes	2D Layout
inline-flex	No	Yes	Inline Flex
inline-grid	No	Yes	Inline Grid

Easy Memory Trick

• block → “Own lane”
• inline → “Stay in line”
• inline-block → “Inline with powers”
• flex → “One direction layout”
• grid → “Rows + columns”
• none → “Disappear”

About the Author

codeflare

Administrator

Latest tech news and coding tips.

Visit Website View All Posts