Box Model

box-sizing: content-box | border-box;

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

/* With border-box: a 300px wide element stays 300px
   even with padding and border added */
.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  /* Total width: still 300px */
}

Note The universal border-box reset is considered best practice. Without it, padding and borders are added on top of the width, making sizing unpredictable.

margin: top right bottom left;
margin: vertical horizontal;
margin: all;

.section {
  margin: 40px 0;
}

.container {
  margin: 0 auto; /* center horizontally */
  max-width: 1200px;
}

.spaced-item {
  margin-top: 16px;
  margin-bottom: 16px;
}

Note Vertical margins collapse: when two vertical margins touch, only the larger one applies (not their sum). Margins on flex and grid children do not collapse. Use margin: 0 auto on a block element with a set width to center it.

padding: top right bottom left;
padding: vertical horizontal;
padding: all;

.button {
  padding: 10px 24px;
}

.card {
  padding: 24px;
}

.nav-link {
  padding-block: 8px;
  padding-inline: 16px;
}

Note Unlike margins, padding never collapses. Padding is inside the element's border, so background colors and images extend into the padded area. Use padding-block and padding-inline for writing-mode-aware spacing.

border: width style color;
border-radius: value;

.input {
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.avatar {
  border: 3px solid #3b82f6;
  border-radius: 50%; /* perfect circle */
}

.alert {
  border-left: 4px solid #f59e0b;
  border-radius: 0;
}

Note Border styles include solid, dashed, dotted, double, groove, ridge, inset, outset, and none. Use border-radius: 50% on a square element to create a circle. Individual sides can be styled separately.

width: value; height: value;
min-width | max-width | min-height | max-height

.container {
  width: 100%;
  max-width: 1200px;
}

.sidebar {
  width: 280px;
  min-height: 100vh;
}

.avatar {
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
}

Note Avoid setting fixed heights on text containers since content length varies. Use min-height instead. The aspect-ratio property maintains proportions without needing both width and height.

overflow: visible | hidden | scroll | auto | clip;
overflow-x: value;
overflow-y: value;

.card-body {
  max-height: 200px;
  overflow-y: auto;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-scroll {
  overflow: clip;
}

Note overflow: auto only shows scrollbars when content actually overflows, while scroll always shows them. overflow: clip is like hidden but does not create a scroll container, preventing programmatic scrolling. Combine overflow: hidden with text-overflow: ellipsis for truncated text.

outline: width style color;
outline-offset: value;

.button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.card:focus-within {
  outline: 2px solid #8b5cf6;
  outline-offset: 0;
}

Note Unlike border, outline does not take up space in the layout and does not affect element sizing. It can overlap adjacent elements. outline-offset pushes the outline away from the element edge. Never remove focus outlines without providing an alternative indicator.

display: block | inline | inline-block | none;

.nav-link {
  display: inline-block;
  padding: 8px 16px;
}

.hidden {
  display: none; /* removes from layout and accessibility tree */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

Note block takes full width, starts on a new line, accepts all box model properties. inline only takes content width, ignores vertical margin/padding. inline-block is inline but respects all box model properties. display: none removes the element entirely. For screen-reader-only content, use the visually-hidden pattern instead.