Height and Width

You will be able to set an element's width and height, understand how padding and border affect the visible size, and choose fixed or flexible dimensions for common layouts.

What it is

Width and height are CSS properties that define the size of an element's content box. By default, width sets the horizontal content area and height sets the vertical content area. The total visible box can become larger when you add padding and border, because those are drawn outside the content area. The box-sizing property changes this model: content-box is the default, while border-box makes width and height include padding and border. Related terms include max-width, min-height, aspect-ratio, and auto.

Why it matters

• It lets you create predictable cards, buttons, images, and form fields.
• It prevents layout jumps when content loads or changes.
• It helps controls align in grids and flex containers.
• It supports responsive design when combined with percentages, max-width, and min-height.
• It makes visual spacing easier to reason about when using box-sizing: border-box.

Syntax or steps

The smallest useful pattern is to set a fixed size and choose a box model:

.box {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
}

Use px for fixed sizes, % for sizes relative to the parent, auto to let the browser calculate a dimension, and min- or max- properties when content may vary.

Example

<div class="card">
  <h2>Course card</h2>
  <p>This card has a fixed width and a minimum height.</p>
</div>

.card {
  box-sizing: border-box;
  width: 320px;
  min-height: 180px;
  padding: 16px;
  border: 2px solid #333;
  background: #f7f7f7;
}

Part by part: box-sizing: border-box makes the total card width include padding and border. width: 320px sets the card's outer width. min-height: 180px keeps the card at least 180 pixels tall, but allows it to grow if the text needs more space. padding and border are inside the declared width because of border-box.

Common mistakes

• Forgetting that default content-box adds padding and border to the declared size. Fix it by setting box-sizing: border-box.
• Using height on text blocks that may overflow. Fix it by using min-height or letting height be auto.
• Setting a percentage height without a parent height. Fix it by giving the parent a height, using min-height, or using flex/grid sizing.
• Using fixed pixel widths for responsive layouts. Fix it by combining max-width, percentages, or modern layout systems.

When to use it

Use width and height when you need a specific size. Use max-width and min-height when content should be flexible but bounded.

Practice

Guided exercise: Create a .panel that is 280 pixels wide, at least 120 pixels tall, has 12 pixels of padding, and uses border-box. Expected result: the panel's total width remains 280 pixels, and it grows taller if the text needs more space.

Challenge: Add max-width: 100% to the panel. Hint: This helps the panel shrink inside a narrow parent without overflowing.

Quick check

Question: If .box has width: 200px, padding: 20px, and border: 5px solid, what is its total width with default box-sizing?

Answer: 250 pixels, because 200 + 20 + 20 + 5 + 5 = 250.

Summary

Width and height control an element's content dimensions, but padding and border can change the visible size unless you use box-sizing: border-box. Choose fixed sizes for stable controls and flexible sizes like min-height or max-width for content-driven layouts.