CSS display is one of the most important properties in web layout. It determines how elements appear and interact with other elements on the page. Here's a breakdown of the most commonly used display types and how they affect layout behavior:

🔹 block

Behavior:

• Takes up the full width of its container
• Starts on a new line
• Stacks vertically

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

Use case: Structuring large containers and layout sections.

🔹 inline

Behavior:

• Flows with text
• Does not respect width/height
• Padding and margins only apply horizontally

Examples: <span>, <a>, <strong>

Use case: Styling small pieces of content within text.

Example: Highlight a word in a sentence:

<div style="font-size: 16px;">
  The quick <span style="display: inline; background: yellow;">brown</span> fox
  jumps over the lazy dog.
</div>

🔹 inline-block

Behavior:

• Behaves like inline (flows with text)
• But accepts width, height, margin, and padding

Use case: Buttons, badges, icons with spacing but still inline with text.

Example 1: Styled badge inside text:

<div style={{ fontSize: "16px" }}>
  Your order status:{" "}
  <span
    style={{
      display: "inline-block",
      background: "#0d9488",
      color: "white",
      padding: "2px 6px",
      borderRadius: "4px",
    }}
  >
    Delivered
  </span>
</div>

Example 2: 3 items side by side (without flex or grid):

<div style={{ fontSize: 0 }}>
  <div style={{ display: "inline-block", width: "100px", height: "80px", background: "#60a5fa", marginRight: "10px" }}></div>
  <div style={{ display: "inline-block", width: "100px", height: "80px", background: "#34d399", marginRight: "10px" }}></div>
  <div style={{ display: "inline-block", width: "100px", height: "80px", background: "#f87171" }}></div>
</div>

Example 3: Button-style elements:

<div style={{ fontSize: "16px" }}>
  <span
    style={{
      display: "inline-block",
      background: "#3b82f6",
      color: "white",
      padding: "16px",
      paddingTop: "14px",
      paddingLeft: "18px",
      paddingRight: "18px",
      borderRadius: "6px",
      cursor: "pointer",
    }}
  >
    Click Me
  </span>
</div>

🔹 flex

Behavior:

• Activates flexbox layout model
• Children become flex items
• Enables alignment, spacing, and reordering

Use case: One-dimensional layouts (e.g. nav bars, card layouts, toolbars)

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

🔹 grid

Behavior:

• Activates grid layout model
• Enables precise control over rows and columns
• Children become grid items

Use case: Two-dimensional layouts (e.g. dashboards, complex forms)

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

🔹 none

Behavior:

• Removes the element from the layout and flow
• Not rendered at all

Use case: Temporarily hiding elements (Use visibility: hidden if you want to hide but keep layout space)

🧠 Summary Table

✅ When to Use What?

• Use block for structural containers.
• Use inline for text fragments.
• Use inline-block for compact components.
• Use flex for aligning items along a row or column.
• Use grid when you need rows and columns.
• Use none to completely hide an element.