CSS Tutorial
CSS Height and Width
width and height size the content box unless you change box-sizing. min and max keep layouts from breaking.
What width and height size
width and height set the size of an element’s content box by default. Padding and border sit outside that size unless you switch tobox-sizing: border-box. A card that looks 280 pixels wide can occupy more than 280 pixels on the page once padding and a border are added.
Block-level boxes such as div, p, and article honor width and height. Ordinary inline text such as span and a does not — those tags grow with their letters. Use a block, flex, or grid box when you need a fixed size.
Example
<style>
.card {
width: 280px;
height: 120px;
padding: 16px;
background: #e0f2fe;
color: #0c4a6e;
border: 3px solid teal;
}
</style>
<article class="card">
Harbor studio — 280px content, plus padding and border.
</article>Open the example in /css/try and change width. The preview updates the painted box. That editor is the CSS preview, not the HTML or Python editors.
Units you will use first
Pixels (px) are a fixed size. Percentages (%) are relative to theparent’s width (or height, for height: 50%). rem scales with the root font size, which is useful when the visitor zooms text.
| Value | Means | Typical use |
|---|---|---|
280px | Fixed length | A small card or icon slot |
50% | Half of the parent | Two columns in a row |
20rem | 20 times the root font size | A readable column cap |
auto | Size from content or remaining space | Default for most boxes |
Example
<style>
.dock {
width: 100%;
background: #f0f9ff;
padding: 12px;
}
.berth {
width: 50%;
background: teal;
color: white;
padding: 12px;
}
</style>
<div class="dock">
<div class="berth">Harbor studio occupies half the dock.</div>
</div>height: 100% only works if the parent has a known height. A page body withheight: auto gives children nothing to take 100% of. Prefer min-height on sections, or later, viewport units, when you want a tall hero.
min and max keep layouts from breaking
A fixed width on a phone can overflow the screen. A percentage width on a huge monitor can stretch a paragraph into an unreadably long line. min-width, max-width,min-height, and max-height set floors and ceilings without locking one size.
Example
<style>
.notice {
width: 90%;
max-width: 32rem;
min-height: 4rem;
margin: 0 auto;
padding: 1rem;
background: #ccfbf1;
color: #115e59;
border: 2px solid teal;
}
</style>
<p class="notice">
Harbor studio hours: 8–16. This notice grows with the window, then stops at 32rem.
</p>max-width plus a percentage width is the usual fluid column: the box fills small screens and refuses to get too wide on a desk. The next layout chapter on max-width goes deeper.
When content is larger than the box
If you set a height and the text does not fit, the extra content overflows. By default it paints outside the box. You can clip it with overflow: hidden or scroll it withoverflow: auto. Prefer letting height stay auto so the box grows with the copy.
Example
<style>
.clip {
width: 220px;
height: 64px;
overflow: auto;
padding: 8px;
background: #e0f2fe;
color: #0c4a6e;
border: 2px solid #0284c7;
}
</style>
<p class="clip">
Harbor studio keeps tide charts, kiln notes, and booking slips in this short panel. Scroll to read the rest.
</p>Do not hide overflow on text that a visitor must read. A clipped booking note is a bug. Use a taller box, or scroll, when the copy matters.
box-sizing changes what the number means
With the default content-box, width: 200px is the content only. Addpadding: 20px and border: 2px and the painted width is 244 pixels. Withborder-box, the 200 pixels include padding and border. Most modern sheets set box-sizing: border-box once on every element.
| box-sizing | width / height apply to |
|---|---|
content-box (default) | Content only |
border-box | Content + padding + border |
Next: the box model names every layer — content, padding, border, then margin — so you can count the space a Harbor studio card really occupies.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Maths
A tile that is actually 120 by 80
width and height size the content box under content-box. Padding and border add on. min-height keeps a short note from collapsing a dashboard tile.
A 120 px tile is not 120 m. Put SI units in the caption. CSS px is a CSS pixel, not a laboratory metre.
A = w × h (here: CSS px, not metres)
Example
<style>
.tile { width: 120px; height: 80px; background: #4338ca; color: #fff; }
</style>
<div class="tile">Rye</div>Statistics
min-height on a sparse table cell
A cell with one number still needs height so a grid of marks lines up. min-height is the floor; the box can grow if the name wraps.
Example
<style>
.cell { min-height: 72px; background: #e0f2fe; padding: 0.5rem; }
</style>
<div class="cell">81</div>