The CSS Box Model

┌─────────────────────────────┐
│          MARGIN             │
│  ┌───────────────────────┐  │
│  │       BORDER          │  │
│  │  ┌─────────────────┐  │  │
│  │  │    PADDING      │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  CONTENT  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

/* content-box (default) — width = content only */
.box {
    width: 200px;           /* Content width */
    padding: 20px;          /* 20px on each side */
    border: 5px solid;      /* 5px on each side */
    margin: 10px;           /* 10px on each side */
    /* Total width = 200 + 40 + 10 + 20 = 270px */
}

/* border-box — width = content + padding + border */
.box {
    box-sizing: border-box;
    width: 200px;           /* Total width including padding and border */
    padding: 20px;
    border: 5px solid;
    margin: 10px;
    /* Total width = 200 + 20 = 220px (margin separate) */
}

/* Global border-box (highly recommended!) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Shorthand */
.margin-all { margin: 20px; }                    /* All sides */
.margin-vh { margin: 10px 20px; }               /* top/bottom left/right */
.margin-trbl { margin: 10px 20px 30px 40px; }   /* top right bottom left */
.margin-center { margin: 0 auto; }               /* Center horizontally */

/* Individual */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: auto;    /* Push right */

/* Auto margins center block elements */
.container {
    width: 800px;
    margin: 0 auto;   /* Centers the element */
}

/* Margin collapse (block elements) */
.a { margin-bottom: 20px; }
.b { margin-top: 30px; }
/* Visual gap = 30px (not 50px!) — larger margin wins */

/* Same shorthand as margin */
.card { padding: 16px; }
.card { padding: 16px 24px; }         /* vertical horizontal */
.card { padding: 8px 16px 24px; }     /* top horizontal bottom */
.card { padding: 8px 16px 24px 32px; } /* top right bottom left */

/* Padding affects clickable area on buttons */
.button {
    padding: 12px 24px;
    cursor: pointer;
}

/* Basic border */
.box { border: 1px solid #ccc; }

/* Individual sides */
.box { border-top: 2px solid red; }
.box { border-bottom: 1px dashed gray; }

/* Rounded corners */
.circle { border-radius: 50%; }
.rounded { border-radius: 8px; }
.subtle { border-radius: 4px; }

/* Border image */
.fancy-border {
    border: 3px solid;
    border-image: linear-gradient(45deg, red, blue) 1;
}

/* Width and height */
.box {
    width: 300px;        /* Fixed */
    max-width: 100%;     /* Never wider than container */
    min-width: 200px;    /* Never narrower than 200px */
    height: 200px;
    max-height: 100vh;   /* Never taller than viewport */
}

/* Percentage (relative to parent) */
.sidebar { width: 25%; }
.content { width: 75%; }

/* Viewport units */
.hero { height: 100vh; }              /* Full viewport height */
.title { font-size: 5vw; }            /* 5% of viewport width */