Controlling the dimensions of elements is fundamental to CSS layout. The width and height properties determine the size of the content area inside an element's box model.

Units of Measurement

CSS offers various units to control sizing, each with its own behavior:

• Pixels (px): Absolute units. 200px is always 200 pixels, regardless of screen size. Great for fixed components but rigid.
• Percentages (%): Relative units. 50% means half the width of the parent container. Essential for fluid layouts.
• Viewport Units (vh/vw): Relative to the browser window. 100vh is the full height of the visible screen.
• REM/EM: Relative to font size. Useful for scaling layouts based on text settings.

Constraints: Min and Max

To prevent elements from becoming too small or too large, we use constraint properties:

max-width stops an element from growing beyond a certain point (e.g., ensuring text lines don't get too long to read).
min-height ensures an element is at least a certain height, even if it has no content.

The Box Model

Remember that padding and borders add to the total width of an element unless you use box-sizing: border-box. This is a common pitfall when calculating dimensions.