Box Model

margin  ← transparent, outside border
border  ← has color/style/width
padding ← between border and content, background shows
content ← text, images, child elements

/* Default: width/height apply to content only */
box-sizing: content-box;  /* default */

/* Preferred: width/height include padding and border */
box-sizing: border-box;

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

.box {
  width: 300px;
  height: 200px;
  min-width: 100px;
  max-width: 600px;
  min-height: 0;
  max-height: 400px;

  /* fit to content */
  width: fit-content;
  width: max-content;  /* largest without wrapping */
  width: min-content;  /* smallest without overflow */

  /* responsive clamp */
  width: clamp(200px, 50%, 800px);

  /* logical properties */
  inline-size: 300px;   /* width in horizontal writing modes */
  block-size: 200px;    /* height in horizontal writing modes */
}

/* Shorthand */
margin: 10px;                   /* all sides */
margin: 10px 20px;              /* top/bottom  left/right */
margin: 10px 20px 30px;         /* top  left/right  bottom */
margin: 10px 20px 30px 40px;    /* top right bottom left */

/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

/* Logical properties */
margin-block: 1rem;        /* top + bottom */
margin-inline: auto;       /* left + right (centering trick) */
margin-block-start: 0;
margin-block-end: 1rem;
margin-inline-start: 2rem;
margin-inline-end: 0;

/* Auto — center block element */
.centered { width: 600px; margin: 0 auto; }

/* Negative margins */
.pull-left { margin-left: -1rem; }

p { margin-bottom: 1rem; }
h2 { margin-top: 2rem; }
/* gap between p and h2 = 2rem, not 3rem */

/* Shorthand — same pattern as margin */
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;

/* Longhand */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

/* Logical */
padding-block: 1rem;
padding-inline: 1.5rem;
padding-block-start: 0.5rem;
padding-inline-end: 2rem;

/* Shorthand */
border: 1px solid #ccc;
border-top: 2px dashed red;

/* Longhand */
border-width: 1px;
border-style: solid;
border-color: #333;

/* Per-side */
border-top-width: 2px;
border-right-style: dotted;
border-bottom-color: blue;
border-left: none;

/* Logical */
border-block: 1px solid currentColor;
border-inline-start: 3px solid blue;  /* left border in LTR */

/* Border style values */
border-style: none | hidden | solid | dashed | dotted
            | double | groove | ridge | inset | outset;

border-radius: 8px;                   /* all corners */
border-radius: 8px 0;                 /* top-left/bottom-right  top-right/bottom-left */
border-radius: 50%;                   /* circle (on equal width/height) */
border-radius: 1rem 0.5rem 1rem 0.5rem; /* TL TR BR BL */

/* Longhand */
border-top-left-radius: 8px;
border-top-right-radius: 0;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 0;

/* Elliptical radii — horizontal / vertical */
border-radius: 50% / 30%;
border-top-left-radius: 1rem 2rem;

/* Pill shape */
border-radius: 9999px;

border-image: url("frame.png") 30 round;
border-image-source: linear-gradient(red, blue);
border-image-slice: 30;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch | repeat | round | space;

outline: 2px solid blue;
outline: 3px dashed red;
outline: none;              /* remove — always provide :focus-visible alternative */

outline-width: 2px;
outline-style: solid | dashed | dotted | double | none;
outline-color: currentColor;
outline-offset: 4px;       /* gap between border and outline */

/* offset-x  offset-y  blur  spread  color */
box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.2);

/* inset */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

/* Multiple shadows (comma-separated, first listed = topmost) */
box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 4px 12px rgba(0,0,0,0.08);

/* No shadow */
box-shadow: none;

.video-wrapper { aspect-ratio: 16 / 9; }
.avatar { width: 4rem; aspect-ratio: 1; }
img { aspect-ratio: auto 4 / 3; } /* use natural ratio if known, else 4/3 */

.container {
  display: flow-root; /* clearfix replacement */
}

textarea { resize: both; }    /* user can resize in both directions */
div      { resize: horizontal; overflow: auto; }
.fixed   { resize: none; }
/* vertical | both | horizontal | none */

img {
  width: 100%;
  height: 200px;
  object-fit: cover;       /* fill, crop excess */
  object-fit: contain;     /* fit within, letterbox */
  object-fit: fill;        /* stretch to fill (default) */
  object-fit: none;        /* natural size */
  object-fit: scale-down;  /* smaller of none or contain */
  object-position: center top;
  object-position: 25% 75%;
}

/* Shorthand logical */
margin-block: 1rem 2rem;   /* start end */
padding-inline: 1rem;      /* both sides */
inset: 0;                  /* top right bottom left = 0 */
inset-block: 1rem;