CSS Width, Height, min/max and box-sizing: border-box

By default, block elements are as wide as their container and as tall as their content. The sizing properties let you change that.

width and height#

.banner {
  width: 400px;
  height: 120px;
}

Fixed heights are risky: if the content grows (longer text, bigger font, a translated language), it overflows the box. In most layouts, let the height be auto (the default) and control width instead.

max-width and min-width#

max-width lets an element shrink on small screens but stops it growing too wide on large ones. It is one of the most useful properties in responsive design:

.content {
  max-width: 360px;
  background: #fff3c4;
  padding: 8px;
}
img { max-width: 100%; height: auto; }

<div class="content">On a wide screen I stop at 360px; on a narrow one I shrink to fit.</div>
<img src="/lesson-assets/landscape-1200.svg" alt="Green hills" width="1200" height="800">

img { max-width: 100%; height: auto; } makes images shrink to fit their container while keeping their shape. It belongs in almost every stylesheet.

box-sizing#

With the default box-sizing: content-box, width is the content width; padding and border are added outside it. With border-box, width is the total width including padding and border:

.box {
  width: 220px;
  padding: 20px;
  border: 5px solid #2f5fe0;
  margin-bottom: 10px;
  background: #cfe3ff;
}
.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

<div class="box content-box">content-box: 270px wide in total</div>
<div class="box border-box">border-box: exactly 220px wide</div>

border-box is much easier to work with: a width: 50% column with padding stays 50%. That is why almost every modern stylesheet starts with:

*,
*::before,
*::after {
  box-sizing: border-box;
}

aspect-ratio#

aspect-ratio keeps a box's shape as its width changes, which is great for video embeds, thumbnails and cards:

.video {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  background: #222;
  color: white;
  display: grid;
  place-items: center;
}

<div class="video">16:9 at any width</div>

Intrinsic sizes#

Some keywords size an element by its content:

p { background: #c9f0d3; padding: 4px 8px; }

<p>Default width: fills the line</p>
<p style="width: fit-content">width: fit-content</p>

Practice#

* { box-sizing: border-box; }
.half {
  display: inline-block;
  width: 50%;
  padding: 16px;
  border: 2px solid #2f5fe0;
  vertical-align: top;
}
.wrap { font-size: 0; }        /* removes the gap between inline-blocks */
.half { font-size: 16px; }

<div class="wrap"><div class="half">Left</div><div class="half">Right</div></div>

Key takeaway#