CSS

CSS height and width properties define the dimensions of an element. You can set these values in absolute (px, cm, etc.) or relative (%, vw, vh, etc.) units.

---

1️⃣ Setting Width & Height

The width and height properties control the size of an element.

Example:

div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

📌 This makes the div 200px wide and 100px tall.

---

2️⃣ Different Units for Width & Height

CSS allows multiple units to define height & width:

Unit	Description	Example
px	Fixed pixels	width: 300px;
%	Relative to parent	width: 50%;
vw	Viewport width	width: 50vw;
vh	Viewport height	height: 70vh;
em	Relative to font-size	width: 10em;
rem	Relative to root font-size	height: 5rem;
auto	Adjusts based on content	height: auto;
min-content	Shrinks to the smallest content size	width: min-content;
max-content	Expands to fit content	width: max-content;
fit-content	Shrinks or expands to fit content	width: fit-content;

---

3️⃣ width: auto vs Fixed Width

🔹 auto: The element expands based on content
🔹 Fixed width (px, %, etc.): The element stays fixed

Example:

div {
    width: auto;
} 

📌 The div will stretch based on its content.

---

4️⃣ min-width, max-width, min-height, max-height

These properties control how much an element can shrink or grow.

Property	Description
min-width	Minimum width an element can shrink to
max-width	Maximum width an element can grow to
min-height	Minimum height an element can shrink to
max-height	Maximum height an element can grow to

Example:

div {
    min-width: 200px;
    max-width: 500px;
    min-height: 100px;
    max-height: 300px;
}

📌 The div won’t be smaller than 200px or bigger than 500px in width.

---

5️⃣ height: 100% and width: 100%

When you set width: 100%, it takes the full width of the parent.

Example:

.container {
    width: 100%;
    height: 100%;
}

📌 This will fill its parent’s height & width.

🚨 Note: For height: 100% to work, the parent must have a defined height.

---

6️⃣ Viewport Units (vh and vw)

Viewport units make elements responsive.

Unit	Meaning
1vw	1% of viewport width
1vh	1% of viewport height

Example:

.fullscreen {
    width: 100vw;
    height: 100vh;
}

📌 This creates a full-screen element.

---

7️⃣ box-sizing: border-box;

By default, padding and borders increase the total size of an element.

Example:

div {
    width: 200px;
    padding: 20px;
}

📌 Total width = 200px + 20px (left) + 20px (right) = 240px

✅ To keep the width fixed, use:

div {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}

📌 Now the width remains 200px, and padding is included inside.

---

8️⃣ max-width: 100% for Responsive Images

To make an image resize automatically:

img {
    max-width: 100%;
    height: auto;
}

📌 This ensures images never overflow their container.

---

9️⃣ CSS Grid & Flexbox Effects

In Flexbox and CSS Grid, height & width behave differently.

✅ Flexbox Example:

.container {
    display: flex;
}
.flex-item {
    flex: 1; /* Takes available space */
    min-width: 200px;
}

✅ CSS Grid Example:

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

📌 1fr means fractional width of available space.

---

🔟 CSS Width & Height Cheat Sheet

Property	Effect
width: 50%;	50% of parent’s width
width: 100vw;	Full viewport width
min-width: 200px;	Won’t shrink below 200px
max-width: 600px;	Won’t grow beyond 600px
height: auto;	Adjusts to content height
box-sizing: border-box;	Includes padding in width

---

🎯 Conclusion

✅ width & height define an element’s size
✅ auto adjusts height dynamically
✅ min/max-width & min/max-height control size limits
✅ vw & vh make elements responsive
✅ box-sizing: border-box; keeps dimensions predictable