CSS Width and Height

The width and height properties define the size of an element. These values fundamentally affect layout and responsive behavior.

Basic Properties

To control width and height, use width, height, min-width, max-width, min-height, and max-height. These allow elements to have fixed or flexible sizes.

Fixed and Flexible Sizes

In the following example, we show how to define fixed size as well as minimum and maximum width.

The first box is fixed at 200px wide and 100px tall. The second box is flexible, at least 150px wide but no more than 300px.

Percentage Sizes

Width can also be given as a percentage, in which case the element adjusts to the parent’s width.

Viewport-based sizes

In CSS, with viewport units (vw, vh), we can adjust element sizes to the screen width and height. For example, 100vw width always takes the full window width.

In the example below, the box takes the full screen width and half of the screen height.

Dynamic and fluid layouts

With the min(), max(), and clamp() functions, we can control element sizes more flexibly. These allow combining minimum, maximum, and ideal sizes.

The following code creates a box that stays between 200px and 600px wide, but ideally is 50% wide.

Tips for using width and height

Proper sizing is crucial in creating responsive design.

• Use percentage values or viewport units for responsive layouts.
• Min and max values help prevent elements from shrinking or stretching too much.
• Avoid using too many fixed sizes, as it can harm mobile display.