What Are the height and width Properties in CSS?

In CSS, the height and width properties are essential for defining the size of elements on a web page. Whether you’re designing a layout, controlling images, or styling containers, these properties give you control over how elements appear and behave within the layout.

In this article, we’ll explore what height and width do, the units you can use, how they interact with other CSS properties, and best practices.

---

✅ What Do height and width Do?

• width defines how wide an element should be.
• height defines how tall an element should be.

These properties apply to block-level and replaced elements (like <div>, <img>, <iframe>, etc.) and control the content area of the element (not including padding, border, or margin unless modified by box-sizing).

📌 Example:

.box {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

This sets a .box element to be exactly 300 pixels wide and 200 pixels tall.

---

📏 Acceptable Units for Height and Width

You can specify dimensions using various CSS units:

🔹 Absolute Units:

• px (pixels)
• cm, mm, in (for print or physical dimensions)
• pt, pc (rarely used)

🔹 Relative Units:

• % (relative to parent element)
• em, rem (relative to font size)
• vw, vh (relative to viewport)
• vmin, vmax (relative to smaller/larger of viewport dimensions)

📌 Example with Percentages:

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

This sets the container to take 100% of its parent’s width and 50% of its parent’s height.

---

💡 Special Values

Value	Meaning
auto	Default. Browser determines the size based on content/context.
inherit	Inherits the height/width from the parent element.
initial	Resets to the browser’s default.
max-content, min-content	Fits content’s size (used in modern CSS).

---

🧠 Interaction with Box Model

By default, height and width apply to the content box only. Padding and borders add to the total size of the element.

📌 Example:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
}

The actual space this box takes = 300 + (2×20) + (2×5) = 350px

✅ Use box-sizing to include padding/border in width/height:

* {
  box-sizing: border-box;
}

---

🛠 Common Use Cases

• Set a full-screen layout: html, body { height: 100%; } .fullscreen { height: 100vh; width: 100vw; }
• Set max size: img { max-width: 100%; height: auto; }

---

🧪 Things to Watch Out For

• height: % only works if the parent element has a defined height.
• If not set explicitly, height will be determined by content.
• width can shrink-wrap content or stretch to fill parent depending on display type.

---

✅ Summary

Property	Description	Common Values
width	Controls the element’s horizontal size	px, %, vw, auto
height	Controls the element’s vertical size	px, %, vh, auto
box-sizing	Affects how height and width are calculated	content-box, border-box

---

🚀 Final Thoughts

The height and width properties are vital for layout and design control in CSS. Mastering them—along with the box model and units—will give you the flexibility to build clean, responsive designs across all screen sizes.

💡 Pro tip: Combine relative units like %, vh, and rem for more fluid, accessible designs.