Understand how CSS sizes elements — CSS units, width/height, padding, margin, border, outline, and box-shadow.
Absolute: px (never changes). Relative: em (parent font-size), rem (root font-size), % (parent dimension), vw/vh (viewport), ch (width of "0" in current font).
<!DOCTYPE html>
<html><head>
<style>
:root { font-size: 16px; }
div { height: 32px; background: #3b82f6; margin: 6px 0; border-radius: 4px; color: white; font-size: 12px; display: flex; align-items: center; padding: 0 8px; box-sizing: border-box; }
.px { width: 200px; }
.pct { width: 60%; }
.rem { width: 14rem; }
.em { width: 14em; font-size: 14px; }
.vw { width: 40vw; }
.ch { width: 28ch; }
</style>
</head><body style="font-family:sans-serif;padding:16px">
<div class="px">200px — absolute</div>
<div class="pct">60% of parent</div>
<div class="rem">14rem = 224px</div>
<div class="em">14em (font:14px) = 196px</div>
<div class="vw">40vw — viewport</div>
<div class="ch">28ch — character width</div>
</body></html>By default, width/height only size the content. With box-sizing: border-box, padding and border are included in the declared size. Almost all modern projects set this globally.
<!DOCTYPE html>
<html><head>
<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; padding: 16px; }
.box { border: 3px solid steelblue; background: #f0f8ff; padding: 16px; margin: 8px 0; font-size: 14px; }
.fixed { width: 200px; height: 80px; }
.fluid { width: 100%; }
.min-max { min-width: 120px; max-width: 320px; width: 60%; }
</style>
</head><body>
<div class="box fixed">width:200px height:80px — fixed</div>
<div class="box fluid">width:100% — fills the container</div>
<div class="box min-max">min-width:120px max-width:320px width:60%</div>
</body></html>Space between content and the border — part of the element's background. Shorthand: 1 value = all sides; 2 values = vertical horizontal; 4 values = top right bottom left (clockwise).
<!DOCTYPE html>
<html><head>
<style>
div { background: #dbeafe; border: 2px solid steelblue; margin: 8px 0; font-family: sans-serif; font-size: 14px; }
.all { padding: 24px; }
.tb-lr { padding: 8px 32px; }
.four { padding: 4px 16px 24px 48px; }
.sides { padding-top: 20px; padding-left: 8px; }
</style>
</head><body style="padding:16px">
<div class="all">padding: 24px (all sides)</div>
<div class="tb-lr">padding: 8px 32px (vertical | horizontal)</div>
<div class="four">padding: 4px 16px 24px 48px (top right bottom left)</div>
<div class="sides">padding-top: 20px; padding-left: 8px</div>
</body></html>Space outside the border. Vertical margins between block elements collapse — only the larger one applies. margin: 0 auto centers a block element with a fixed width horizontally.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 0; }
.box { padding: 12px; font-size: 14px; }
.m20 { margin: 20px; background: #fef3c7; border: 2px solid #f59e0b; }
.auto { margin: 0 auto; width: 220px; text-align: center; background: #fef3c7; border: 2px solid #f59e0b; }
.a { margin-bottom: 30px; background: #dbeafe; border: 2px solid steelblue; padding: 8px; }
.b { margin-top: 20px; background: #d1fae5; border: 2px solid green; padding: 8px; }
</style>
</head><body>
<div class="box m20">margin: 20px — all sides</div>
<div class="box auto">margin: 0 auto — centered</div>
<p style="padding:8px;font-size:13px;color:#555">30px bottom + 20px top collapse to 30px (not 50px):</p>
<div class="a">margin-bottom: 30px</div>
<div class="b">margin-top: 20px</div>
</body></html>border shorthand: width style color. Style is required — without it the border won't render. border-radius rounds corners; 50% on a square makes a circle.
<!DOCTYPE html>
<html><head>
<style>
div { padding: 12px 16px; margin: 8px 0; font-family: sans-serif; font-size: 14px; }
.solid { border: 2px solid steelblue; }
.dashed { border: 2px dashed tomato; }
.dotted { border: 3px dotted green; }
.radius { border: 4px solid #f59e0b; border-radius: 12px; }
.circle { border: 3px solid steelblue; border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.sides { border-top: 4px solid tomato; border-left: 4px solid steelblue; }
</style>
</head><body style="padding:16px">
<div class="solid">2px solid</div>
<div class="dashed">2px dashed</div>
<div class="dotted">3px dotted</div>
<div class="radius">4px solid with border-radius: 12px</div>
<div class="circle">circle</div>
<div class="sides">top + left borders only</div>
</body></html>outline draws outside the border without affecting layout — essential for keyboard focus rings. Never remove it without a replacement. box-shadow: X Y blur spread color; inset goes inside. Comma-separate multiple shadows.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; background: #f5f5f5; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
div { padding: 16px 20px; border-radius: 8px; background: white; font-size: 14px; }
.outline1 { outline: 3px solid steelblue; }
.outline2 { outline: 3px dashed tomato; outline-offset: 6px; }
.shadow1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow2 { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.hard { box-shadow: 4px 4px 0 steelblue; }
.inset { box-shadow: inset 0 2px 6px rgba(0,0,0,0.15); background: #f0f4ff; }
button { padding: 8px 16px; font-size: 14px; cursor: pointer; }
button:focus { outline: 3px solid #f59e0b; outline-offset: 2px; }
</style>
</head><body>
<div class="outline1">outline: 3px solid</div>
<div class="outline2">outline with offset</div>
<div class="shadow1">small shadow</div>
<div class="shadow2">medium shadow</div>
<div class="hard">hard shadow</div>
<div class="inset">inset shadow</div>
<button>Focus me (Tab key)</button>
</body></html>