display: block

Behavior

• Takes full width
• Starts on a new line
• Can set width & height

Example:

<div>Box 1</div>
<div>Box 2</div>


div {
  display: block;
  background: lightblue;
}

👉 Output:

[Box 1       ]
[Box 2       ]

Common Block Elements:

• <div>
• <p>
• <h1> to <h6>

display: inline

Behavior

• Takes only content width
• Stays in same line
• ❌ Cannot set width/height

Example:

<span>One</span>
<span>Two</span>


span {
  display: inline;
  background: yellow;
}

👉 Output:

One Two

Common Inline Elements:

• <span>
• <a>
• <strong>

display: inline-block

✅ Behavior

• Stays in same line
• ✅ Can set width/height

Example:

<button>Btn 1</button>
<button>Btn 2</button>


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

👉 Output:

[Btn1] [Btn2]

📌 Use Case:

• Buttons
• Cards in row 

. display: none

Behavior

• Completely removes element
• No space taken

Example:

div {
  display: none;
}

👉 Element disappears fully