🧱 CSS ELEMENT TYPES — FULL NOTES

🔹 1. display property

🧠 What does it do?

👉 Controls how an element behaves on the page

display: value;

✅ Main purpose

• ✔ change element type
• ✔ control layout
• ✔ override default behavior

📌 Example

span {
  display: block;
}

👉 makes an inline element behave like a block

🔹 2. Types of elements

There are 3 main types:

• block
• inline
• inline-block

🔹 3. Block elements

🧠 Characteristics

• ✔ display: block
• ✔ take full width
• ✔ start on a new line
• ✔ stack vertically

📊 Behavior

• ✔ width → full by default
• ✔ height → depends on content
• ✔ can set all properties

✔ You CAN use:

• width
• height
• margin
• padding
• border

📌 Examples

<div></div>
<p></p>
<h1></h1>
<section></section>

🔹 4. Fixed width blocks

Even if width is set:

👉 blocks still stay one under another

💡 Important

Remaining space = margin-right: auto

🔹 5. Margin collapsing (IMPORTANT)

🧠 What happens?

Vertical margins DO NOT add up

👉 the bigger margin wins

📌 Example

.top {
  margin-bottom: 20px;
}

.bottom {
  margin-top: 40px;
}

👉 result = 40px, not 60px

🔹 6. Margin collapse rule

• ✔ only vertical
• ✔ only block elements

🔹 7. Margin collapsing (nested elements problem)

🧠 Problem

Child margin "escapes" parent

📌 Example

.inner {
  margin-top: 40px;
}

👉 pushes the parent instead

❗ Important rule

👉 Use margins between elements only

🔹 8. Horizontal centering

🧠 How to center a block?

.box {
  width: 300px;
  margin: 0 auto;
}

✔ Why it works

👉 auto margins split free space equally

🔹 9. Viewport

🧠 What is it?

👉 visible part of the page

💡 Important

• ✔ differs on desktop/mobile
• ✔ user can scroll

🔹 10. Container (wrapper)

🧠 What is it?

👉 block that centers content

📌 Example

.container {
  width: 480px;
  margin: 0 auto;
  padding: 0 15px;
}

✔ Purpose

• ✔ limit width
• ✔ center content
• ✔ improve layout

🔹 11. <div> element

🧠 What is it?

👉 universal container

✔ Characteristics

• ✔ no semantic meaning
• ✔ used for grouping

📌 Example

<div class="container"></div>

🔹 12. Inline elements

🧠 Characteristics

• ✔ display: inline
• ✔ stay in one line
• ✔ wrap when needed

❗ Limitations

• ❌ width → doesn't work
• ❌ height → doesn't work
• ❌ vertical margin → ignored

✔ Only works

• ✔ horizontal padding
• ✔ horizontal margin

📌 Example

a {
  padding-left: 20px;
  margin-right: 20px;
}

❌ Not working

a {
  width: 100px;
  margin-top: 20px;
}

🔹 13. Inline vertical padding issue

🧠 Problem

Vertical padding is visible BUT:

👉 does NOT affect layout

👉 overlaps other elements

❗ Conclusion

👉 avoid vertical spacing on inline elements

🔹 14. Fix: make inline → block

a {
  display: block;
}

🔹 15. Inline-block elements

🧠 Hybrid type

👉 combines block + inline

✔ Characteristics

• ✔ stay in line
• ✔ can set width/height
• ✔ full geometry works

📌 Example

.link {
  display: inline-block;
  padding: 16px 32px;
}

✔ Use cases

• ✔ buttons
• ✔ icons
• ✔ styled links

🔹 16. Inline spacing issue

🧠 Problem

Inline elements have small gaps

📏 Why?

👉 caused by font-size

📊 Rule

Gap ≈ 1/4 of font-size

📌 Example

body {
  font-size: 32px;
}

👉 gap = 8px

🔹 17. Hiding elements

🧠 How?

display: none;

✔ Effect

• ✔ removes element
• ✔ removes space
• ✔ not visible

❗ Important

👉 cannot animate display

🔹 18. Example (tabs)

.pane {
  display: none;
}

.pane.active {
  display: block;
}

🔥 FINAL SUMMARY

🧠 Remember:

👉 block = structure

👉 inline = text

👉 inline-block = flexible

💪 Most important rules:

• ✔ use margin: 0 auto for centering
• ✔ avoid vertical margin on inline
• ✔ watch margin collapsing
• ✔ use inline-block for buttons