What Units Can Be Used for Height and Width in CSS?

When designing and styling web pages with CSS, setting the height and width of elements is one of the core techniques used to control layout. To define the size of elements, CSS provides a wide range of units that offer flexibility for different design needs. Each unit behaves differently and serves specific purposes depending on whether you want your elements to be fixed, fluid, or responsive.

In this blog, we’ll explore the various units you can use to set the height and width of elements in CSS, and discuss when and why you should use each one.

Types of Units in CSS

CSS units can be categorized into two broad groups: absolute units and relative units. Each type serves different purposes, allowing developers to control dimensions with precision and flexibility.

1. Absolute Units

Absolute units are fixed in size and do not scale relative to other elements or the viewport. These units are best used when you want an element to have a consistent, non-changing size across all screen sizes.

2. Relative Units

Relative units, on the other hand, are dynamic and scale based on the size of another element (such as the parent container) or the viewport. These units are useful for creating responsive designs that adapt to different devices and screen sizes.

Absolute Units

Absolute units provide a fixed size for elements and are useful when you want the size of an element to remain constant, regardless of screen size or the parent element’s dimensions. Common absolute units include:

1. Pixels (px)

• Description: px is the most common absolute unit in CSS. A pixel is a tiny dot on the screen that represents a fixed point in the display grid.
• Usage: Pixels are often used for precise control over element dimensions, especially when you want consistent sizing across different devices.
• Example:

.element {
  width: 200px;
  height: 150px;
}

In this example, the element will always be 200px wide and 150px tall, regardless of screen size.

2. Centimeters (cm)

• Description: The cm unit represents physical centimeters. It is rarely used in web design because screens vary in pixel density, making physical measurements like centimeters difficult to maintain accurately.
• Usage: Mainly used for print styles rather than on-screen design.
• Example:

.element {
  width: 10cm;
  height: 5cm;
}

3. Inches (in)

• Description: The in unit is similar to cm but represents physical inches.
• Usage: Like centimeters, inches are mostly used in print styles, not web design.
• Example:

.element {
  width: 3in;
  height: 2in;
}

4. Millimeters (mm)

• Description: The mm unit represents physical millimeters and is another unit more suited for print media.
• Usage: Rarely used in web development.
• Example:

.element {
  width: 100mm;
  height: 50mm;
}

5. Points (pt)

• Description: One point (pt) is equal to 1/72 of an inch. Points are commonly used in print design for font sizes.
• Usage: Typically used for typography in print media.
• Example:

.element {
  font-size: 12pt;
}

6. Picas (pc)

• Description: A pc is equal to 12 points or 1/6th of an inch.
• Usage: Rarely used in web design, mostly found in typography and print layout.
• Example:

.element {
  width: 2pc;
  height: 3pc;
}

Relative Units

Relative units are more dynamic than absolute units because they are based on the size of other elements, the viewport, or even the font size. These units are vital for creating responsive designs.

1. Percentages (%)

• Description: Percentage units are calculated relative to the size of the parent element. For example, 50% width will mean that the element is half the width of its parent container.
• Usage: Widely used for creating fluid and responsive layouts.
• Example:

.element {
  width: 50%;
  height: 50%;
}

In this example, the element will take up half of the width and height of its parent container.

2. em

• Description: The em unit is relative to the font size of the parent element. If the font size of the parent is 16px, then 1em equals 16px.
• Usage: Commonly used for font sizes and for margin or padding, making designs more scalable.
• Example:

.element {
  width: 20em;
  height: 10em;
}

If the parent font size is 16px, the element will be 320px wide and 160px tall.

3. rem (Root em)

• Description: The rem unit is similar to em, but instead of being relative to the parent element’s font size, it is relative to the root element (html) font size, which is usually 16px by default.
• Usage: Rem units are useful for creating consistent, scalable designs.
• Example:

.element {
  width: 10rem;
  height: 5rem;
}

In this case, the element will be 160px wide and 80px tall, assuming the root font size is 16px.

4. Viewport Width (vw)

• Description: The vw unit represents a percentage of the viewport’s width. 1vw is equal to 1% of the width of the browser window.
• Usage: Commonly used for full-width elements or for responsive typography.
• Example:

.element {
  width: 50vw;
}

The element will be 50% of the viewport’s total width.

5. Viewport Height (vh)

• Description: Similar to vw, the vh unit is relative to the viewport’s height. 1vh equals 1% of the total height of the viewport.
• Usage: Often used for full-height sections or responsive layouts that scale with the height of the viewport.
• Example:

.element {
  height: 100vh;
}

The element will occupy 100% of the viewport height, making it full-screen.

6. vmin and vmax

• Description:
• vmin is based on the smaller value between the viewport’s width and height.
• vmax is based on the larger value between the viewport’s width and height.
• Usage: Useful for elements that need to scale based on both dimensions of the viewport to maintain proportions.
• Example:

.element {
  width: 50vmin;
  height: 50vmax;
}

This element will take 50% of the smaller dimension for its width and 50% of the larger dimension for its height.

Choosing the Right Unit for Height and Width

When deciding which unit to use for height and width in your CSS, consider the following:

• Fixed vs. Flexible Layout: If you need a fixed-size element, use absolute units like px. For responsive designs, opt for percentages or viewport units like vw and vh.
• Responsive Design: For elements that should adapt to different screen sizes, use percentages, viewport units (vw, vh), or relative units like em and rem.
• Typography: When designing responsive text or spacing related to text size, use em or rem units to ensure scalability across different devices.

Conclusion

CSS provides a wide variety of units for setting height and width, each with its unique properties and use cases. Absolute units like px offer precise control for fixed dimensions, while relative units such as percentages, em, rem, and viewport units enable flexible, responsive designs. Choosing the right unit depends on the requirements of your layout, the design approach you’re taking, and how you want your elements to behave across different devices and screen sizes.

For modern, responsive web designs, combining relative units with CSS Flexbox or Grid layouts will give you the control and flexibility to create fluid, scalable layouts that look great on any device.