📐 CSS GEOMETRY — FULL NOTES

🔹 1. padding (inner spacing)

🧠 What is it?

👉 Space between content and border

📊 Syntax

✔ 1 value (all sides)

padding: 20px;

✔ 2 values

padding: 10px 20px;

(top/bottom, left/right)

✔ 3 values

padding: 10px 20px 5px;

(top, left/right, bottom)

✔ 4 values

padding: 10px 15px 20px 25px;

(top, right, bottom, left)

💡 Important

• ✔ inside the element
• ✔ cannot be negative
• ✔ used for layout/design

🔹 Individual sides

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

🔹 2. margin (outer spacing)

🧠 What is it?

👉 Space between elements

📊 Syntax (same as padding)

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

💡 Important

• ✔ outside the element
• ✔ separates elements
• ✔ can be negative

🔹 Individual sides

margin-top: 10px;
margin-bottom: 20px;

🔥 padding vs margin (remember!)

🔹 3. Global reset (VERY IMPORTANT)

🧠 Why?

Browsers have default spacing → breaks your layout

✔ Standard reset

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

🔹 4. border

🧠 What is it?

👉 A line around the element

📊 Syntax

border: 2px solid black;

📊 Parts

🔹 Separate properties

border-width: 2px;
border-style: dashed;
border-color: black;

🔹 One side only

border-top: 2px solid black;
border-right: 2px dashed red;

🔹 5. border-radius

🧠 What does it do?

👉 Rounds the corners

border-radius: 8px;

💡 Circle

border-radius: 50%;

🔹 Individual corners

border-top-left-radius: 10px;
border-bottom-right-radius: 20px;

🔹 6. overflow (VERY IMPORTANT)

🧠 What is it?

👉 Controls what happens when content overflows the element

📊 Values

1️⃣ visible (default)

overflow: visible;

• ✔ content flows outside

2️⃣ hidden

overflow: hidden;

• ✔ cuts off content
• ❌ content becomes invisible

3️⃣ scroll

overflow: scroll;

• ✔ adds scrollbars
• ❌ even if not needed

4️⃣ auto (BEST)

overflow: auto;

• ✔ adds scroll only when needed

🔥 IMPORTANT

👉 Do NOT use overflow: hidden for text

👉 because content becomes inaccessible

🔹 7. overflow + images (common trick)

🧠 Problem

Image goes outside the container

✔ Solution

.container {
  border-radius: 8px;
  overflow: hidden;
}

🔹 8. Typical card layout

.card {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

🔹 9. Main rules

✅ Use:

• ✔ padding → inner spacing
• ✔ margin → spacing between elements
• ✔ border-box → easier sizing
• ✔ overflow: auto → safe for content

❌ Avoid:

• ❌ fixed height
• ❌ overflow: hidden on text
• ❌ mixing margin/padding randomly

🔹 10. Think like a developer

👉 Always visualize:

content → padding → border → margin

💪 FINAL IDEA

👉 Layout = controlling spacing

👉 If something looks wrong → check:

• margin
• padding
• box-sizing