1. Display Types

A. Block Elements

div {
  display: block; /* Default for <div>, <p>, <h1>-<h6> */
}

Characteristics:

• Starts on a new line

• Takes full available width

• Accepts all box model properties (width, height, margin, padding)

• Examples: <div>, <p>, <section>, <ul>

B. Inline Elements

span {
  display: inline; /* Default for <span>, <a>, <strong> */
}

Characteristics:

• Flows with text content

• Only takes necessary width

• Ignores width/height and vertical margins

• Examples: <span>, <a>, <em>, <img>

C. Inline-Block Elements

button {
  display: inline-block; /* Hybrid behavior */
}

Characteristics:

• Flows like inline (no line break)

• Behaves like block for box model

• Respects width/height and all margins

• Perfect for navigation items, buttons

<div style="border:1px solid red">Block (full width)</div>
<span style="border:1px solid blue">Inline (text flow)</span>
<div style="display:inline-block; border:1px solid green">Inline-Block</div>

3. How do we Hide Elements?

A. display: none

.hidden {
  display: none; /* Completely removed from layout */
}

• Element becomes invisible and doesn’t take space

• DOM element still exists.

B. visibility: hidden

.invisible {
  visibility: hidden; /* Hides but reserves space */
}

• Element is invisible but keeps its space

• Child elements can override with visibility: visible

Comparison Table