CSS Height and Width

Every element has a size. width sets how wide it is, height sets how tall it is. By default both are auto — the browser decides: a block element stretches to fill its parent's width, and its height grows to fit its content.

Diagram — see how it fits together

The size you set with width and height applies to the content box by default. Padding and border are added on top of it (unless you use box-sizing: border-box, which you will meet in the Box Model lesson).

Units — how to say a size

• px — pixels. Fixed and exact. width: 300px; is always 300 pixels wide.
• % — a percentage of the parent element. width: 50%; means half as wide as its parent.
• em — relative to the element's own font size. If the font is 16px, 2em is 32px.
• rem — relative to the root (<html>) font size, usually 16px. 2rem is 32px anywhere on the page.
• vw and vh — a percentage of the viewport (the browser window). width: 50vw; is half the window width; height: 100vh; is the full window height.

Minimum and maximum sizes

Sometimes you want a size with limits. min-width and min-height set the smallest an element may shrink to; max-width and max-height set the largest it may grow to. A card with width: 80%; max-width: 600px; grows with the screen but never gets wider than 600px. Images use this trick a lot: max-width: 100%; stops a big photo from overflowing a small phone screen.

Syntax — sizes in action

.card {
  width: 320px;
  min-height: 120px;
}
.hero {
  width: 100%;
  height: 100vh;
}
img {
  max-width: 100%;
  height: auto;
}
.box {
  width: calc(100% - 40px);
}

calc() — maths in CSS

calc() lets you mix units: width: calc(100% - 40px); means "the full width minus 40 pixels". It is handy for a content area next to a fixed sidebar. Remember the spaces: calc(100%-40px) without spaces around the minus sign does not work.

Common mistakes

• Setting a fixed height in pixels on a box full of text — on a small screen the text overflows. Use min-height instead, so the box can grow.
• Using width: 100% together with padding — the padding is added on top, so the box overflows its parent. Use box-sizing: border-box or calc().
• Forgetting the spaces inside calc() — calc(100% - 40px) works, calc(100%-40px) does not.
• Setting height: 100% on an element whose parent has no height — the percentage has nothing to measure against.

Remember

• width and height set the size of the content box by default.
• px is fixed, % is relative to the parent, rem is relative to the root font size, vw/vh are relative to the window.
• max-width: 100% keeps images inside small screens.
• Use min-height for boxes with text, so they can grow.
• calc() needs spaces around + and -.

Example explained

• .profile { width: 320px; max-width: 90%; } — the card is 320px wide on a big screen, but on a small phone it shrinks to 90% of the screen instead of overflowing.
• .profile img { width: 100%; height: auto; } — the photo fills the card's width, and height: auto keeps its shape, so the face never looks stretched.
• .bar { width: 200px; } — the outer bar is a fixed 200px, so the inner fill can be measured against it in percentages.
• .fill { width: 75%; } — the green fill is 75% of the 200px bar, which is how the 75% attendance score is drawn.
• .notice { width: calc(100% - 40px); margin: 20px; } — the notice strip takes the full width minus 40px, leaving exactly the 20px margin on each side.