Total Width  = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Total Height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

.box {
  width: 300px;
  height: 150px;
}

/* Auto is the default — block elements expand to fill parent width */
.auto-box {
  width: auto;   /* default */
  height: auto;  /* grows with content */
}

.responsive-card {
  width: 100%;
  max-width: 600px;   /* never wider than 600px */
  min-width: 280px;   /* never narrower than 280px */
}

.text-container {
  min-height: 200px;  /* at least this tall */
  max-height: 80vh;   /* at most 80% of viewport */
  overflow-y: auto;   /* scroll if content overflows */
}

.box {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

/* 1 value: all four sides */
.a { padding: 20px; }
/* top=20  right=20  bottom=20  left=20 */

/* 2 values: vertical | horizontal */
.b { padding: 10px 30px; }
/* top=10  right=30  bottom=10  left=30 */

/* 3 values: top | horizontal | bottom */
.c { padding: 10px 30px 20px; }
/* top=10  right=30  bottom=20  left=30 */

/* 4 values: top | right | bottom | left (clockwise) */
.d { padding: 10px 20px 30px 40px; }
/* top=10  right=20  bottom=30  left=40 */

/* Aspect ratio trick: 16:9 responsive box */
.aspect-16-9 {
  width: 100%;
  padding-top: 56.25%;  /* 9/16 = 0.5625 = 56.25% */
  height: 0;
  position: relative;
}

.aspect-16-9 > * {
  position: absolute;
  inset: 0;
}

.box {
  border-width: 2px;              /* all sides */
  border-width: 1px 3px;           /* vertical | horizontal */
  border-width: 1px 2px 3px 4px;  /* top | right | bottom | left */
}

/* Individual sides */
.box {
  border-top-width: 3px;
  border-right-width: 1px;
  border-bottom-width: 3px;
  border-left-width: 1px;
}

.box { border-style: solid; }    /* continuous line */
.box { border-style: dashed; }   /* series of dashes */
.box { border-style: dotted; }   /* series of dots */
.box { border-style: double; }   /* two parallel lines */
.box { border-style: groove; }   /* carved into the page */
.box { border-style: ridge; }    /* opposite of groove */
.box { border-style: inset; }    /* sunken appearance */
.box { border-style: outset; }   /* raised appearance */
.box { border-style: none; }     /* no border (default) */
.box { border-style: hidden; }   /* same as none, except in table border collapsing */

.box {
  border-color: #e74c3c;                          /* all sides */
  border-color: #e74c3c #3498db;                 /* vertical | horizontal */
  border-color: #e74c3c #3498db #2ecc71 #e67e22; /* top | right | bottom | left */
}

.box {
  border: 2px solid #3498db;
}

/* Individual side shorthands */
.box {
  border-top: 3px dashed #e74c3c;
  border-right: 1px solid #ccc;
  border-bottom: 3px double #2ecc71;
  border-left: 1px solid #ccc;
}

.rounded {
  border-radius: 8px;   /* all four corners */
}

.more-rounded {
  border-radius: 20px;  /* more pronounced rounding */
}

.custom-corners {
  border-radius: 10px 20px 30px 40px;
  /* top-left: 10px  top-right: 20px  bottom-right: 30px  bottom-left: 40px */
}

/* Individual corner properties */
.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 0;
}

.elliptical {
  border-radius: 50px / 20px;
  /* horizontal-radius: 50px  vertical-radius: 20px */
}

.organic {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  /* creates a blob / organic shape */
}

/* Perfect circle (equal width and height required) */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Pill shape (works with any width) */
.pill {
  padding: 8px 24px;
  border-radius: 9999px;  /* any very large value works */
}

.box {
  outline: 3px solid #e74c3c;
  outline-offset: 5px;  /* space between border and outline */
}

/* Individual properties */
.box {
  outline-width: 2px;
  outline-style: dashed;
  outline-color: #3498db;
  outline-offset: 4px;
}

/* WRONG — removes all focus indicators */
*:focus {
  outline: none;  /* Don't do this! */
}

/* CORRECT — custom focus styles */
*:focus-visible {
  outline: 2px solid #6c8cff;
  outline-offset: 2px;
}

/* Hide outline for mouse clicks, show for keyboard */
button:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible {
  outline: 3px solid #6c8cff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Individual sides */
.box {
  margin-top: 20px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 15px;
}

/* Shorthand (same rules as padding: 1/2/3/4 values) */
.a { margin: 20px; }                              /* all four sides */
.b { margin: 10px 30px; }                         /* vertical | horizontal */
.c { margin: 10px 30px 20px; }                   /* top | horizontal | bottom */
.d { margin: 10px 20px 30px 40px; }             /* top | right | bottom | left */

.centered {
  width: 600px;      /* must have an explicit width */
  margin: 0 auto;    /* top/bottom=0, left/right=auto */
}

/* Also works with max-width for responsive centering */
.responsive-centered {
  max-width: 800px;
  margin-inline: auto;  /* modern logical property */
}

/* Pull element upward */
.overlap-up {
  margin-top: -20px;
}

/* Extend beyond parent padding */
.full-bleed {
  margin-left: -20px;
  margin-right: -20px;
}

.box {
  margin: 5%;  /* all four margins = 5% of parent's width */
}

.box-a { margin-bottom: 30px; }
.box-b { margin-top: 20px; }

/* Resulting gap between them = 30px (NOT 50px) */
/* The larger margin wins */

/* The child's margin-top "leaks" out of the parent */
.parent {
  margin-top: 0;
  /* No padding-top, no border-top */
}
.child {
  margin-top: 40px;
  /* This margin escapes the parent! */
}

/* This empty div's top and bottom margins collapse into one */
.empty {
  margin-top: 20px;
  margin-bottom: 30px;
  /* Resulting margin = 30px (the larger one) */
}

/* 1. Add padding to the parent */
.parent { padding-top: 1px; }

/* 2. Add border to the parent */
.parent { border-top: 1px solid transparent; }

/* 3. Use overflow other than visible */
.parent { overflow: hidden; }  /* or auto */

/* 4. Make parent a flex or grid container */
.parent { display: flex; flex-direction: column; }
.parent { display: grid; }

/* 5. Use display: flow-root (creates new BFC) */
.parent { display: flow-root; }

.content-box-demo {
  box-sizing: content-box;  /* default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Rendered width = 200 + 20 + 20 + 5 + 5 = 250px */
}

.border-box-demo {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Rendered width = exactly 200px */
  /* Content area = 200 - 20 - 20 - 5 - 5 = 150px */
}

/* Universal box-sizing reset — industry standard */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Alternative: inheritable pattern */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Block: full box model, new line */
.block { display: block; }

/* Inline: width/height/vertical margin ignored */
.inline { display: inline; }

/* Inline-block: full box model, flows inline */
.inline-block { display: inline-block; }

/* BUG: overflows parent because padding is added to 100% */
.input {
  width: 100%;
  padding: 16px;
  /* box-sizing defaults to content-box */
  /* Rendered width = 100% + 32px — overflows! */
}

/* FIX */
.input {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  /* Rendered width = exactly 100% */
}

/* Physical (breaks in RTL) */
.card { padding-left: 20px; margin-right: 16px; }

/* Logical (works in any writing mode) */
.card { padding-inline-start: 20px; margin-inline-end: 16px; }

/* Debugging helper: shows all element boxes without affecting layout */
* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

/* OLD approach: margin on children with negative margin on parent */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}
.grid > * { margin: 8px; }

/* MODERN: clean gap property */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Modern aspect ratio */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.square {
  width: 200px;
  aspect-ratio: 1;  /* shorthand for 1/1 */
}

/* "Border" using box-shadow (no layout impact) */
.shadow-border {
  box-shadow: 0 0 0 3px #6c8cff;
  border-radius: 8px;
}

/* Double border effect */
.double-border {
  box-shadow:
    0 0 0 3px #6c8cff,
    0 0 0 6px #a78bfa;
}