Controlling the dimensions of elements is fundamental to web layout. The width and height properties determine the size of the content box. Understanding the different units available is key to creating responsive designs.

Types of Units

• Pixels (px): Absolute units. 200px will always be 200 physical pixels on the screen (normalized). Good for borders or fixed icons, but rigid for main layouts.
• Percentages (%): Relative to the parent element. width: 50% means the element takes up half the width of its container. Essential for fluid grids.
• Viewport Units (vw/vh): Relative to the browser window size. 100vh equals 100% of the viewport height. Great for hero sections.

Constraints: Min and Max

To prevent layouts from breaking, we often use constraint properties. max-width stops an element from getting too wide on large screens, while min-height ensures a section is tall enough even if it has little content.

The Box Model Context

Remember that by default, padding and border are added outside the defined width and height. Use box-sizing: border-box to include padding and border within the total size.