🧱 CSS COURSE – MODULE 6: DISPLAY & VISIBILITY

📁 File: display.md

🧱 Display & Visibility in CSS

📌 Introduction

The display property controls how an element behaves in layout.

👉 It decides:

• if an element takes full width
• if it sits inline
• if it is hidden
• how it flows on the page

🧠 1. Block Elements

div {
  display: block;
}

📌 Behavior:

• Takes full width
• Starts on new line

Examples:

• <div>
• <h1>
• <p>

🔗 2. Inline Elements

span {
  display: inline;
}

📌 Behavior:

• Takes only needed width
• Stays in same line

Examples:

• <span>
• <a>

🧩 3. Inline-Block

button {
  display: inline-block;
}

📌 Behavior:

• Stays inline
• Can set width/height

✔ Best of both worlds

🚫 4. None (Hide Element)

div {
  display: none;
}

📌 Behavior:

• Element disappears completely
• Takes no space

👁️ 5. Visibility Property

div {
  visibility: hidden;
}

📌 Behavior:

• Element is invisible
• BUT still takes space

🧠 Display vs Visibility

🧩 Real Example

<div class="box">Block Element</div>
<span class="text">Inline Element</span>
<button>Button</button>

.box {
  display: block;
  background: lightblue;
}

.text {
  display: inline;
  color: red;
}

button {
  display: inline-block;
  padding: 10px;
}

🧠 Important Concept

Display = how element behaves in layout

⚠️ Common Mistakes

• Using block when inline is needed ❌
• Using inline when width is needed ❌
• Confusing visibility vs display ❌
• Breaking layout with display changes ❌

🎯 Pro Tip

👉 Most modern UI uses:

• block → layout sections
• inline-block → buttons
• flex → advanced layout (next module)

🧪 Mini Exercise

Create a page with:

1. A block element (div)
2. Inline text (span)
3. Inline-block button
4. One hidden element using display:none
5. One element using visibility:hidden