📦 The Box Model

Understanding Spacing

CSS Box Model

Every HTML element is a rectangular box. Understanding the CSS box model is fundamental to controlling layout and spacing.

💻 Box Model Components

Every box has four main parts:

/* Visual representation */
/*
┌─────────────── margin ───────────────┐
│ ┌─────────── border ──────────────┐ │
│ │ ┌──────── padding ───────────┐ │ │
│ │ │                             │ │ │
│ │ │        CONTENT              │ │ │
│ │ │                             │ │ │
│ │ └─────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
└───────────────────────────────────────┘
*/

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

/* Total width = 300 + 20 + 20 + 5 + 5 + 10 + 10 = 370px */
/* Total height = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px */

📏 Width & Height

/* Fixed dimensions */
.box {
    width: 300px;
    height: 200px;
}

/* Percentages */
.responsive {
    width: 50%;
    height: 100%;
}

/* Auto (default) */
.auto {
    width: auto;    /* Takes available width */
    height: auto;   /* Based on content */
}

/* Min and max */
.flexible {
    width: 100%;
    max-width: 1200px;
    min-width: 320px;
    min-height: 400px;
}

/* Viewport units */
.fullscreen {
    width: 100vw;   /* 100% of viewport width */
    height: 100vh;  /* 100% of viewport height */
}

📐 Padding

Space between content and border (inside the element).

/* All sides */
.box {
    padding: 20px;
}

/* Vertical | Horizontal */
.box {
    padding: 20px 40px;
}

/* Top | Horizontal | Bottom */
.box {
    padding: 10px 20px 30px;
}

/* Top | Right | Bottom | Left (clockwise) */
.box {
    padding: 10px 20px 30px 40px;
}

/* Individual sides */
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

/* Percentage (relative to parent width) */
.responsive {
    padding: 5%;
}

🔲 Border

Border Width

/* All sides */
.box {
    border-width: 2px;
}

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

/* Keywords */
.thin { border-width: thin; }
.medium { border-width: medium; }
.thick { border-width: thick; }

Border Style

/* Required for border to show */
.solid { border-style: solid; }
.dashed { border-style: dashed; }
.dotted { border-style: dotted; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge { border-style: ridge; }
.inset { border-style: inset; }
.outset { border-style: outset; }
.none { border-style: none; }
.hidden { border-style: hidden; }

/* Individual sides */
.box {
    border-top-style: solid;
    border-right-style: dashed;
}

Border Color

/* All sides */
.box {
    border-color: red;
}

/* Individual sides */
.box {
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: yellow;
}

/* Transparent */
.transparent {
    border-color: transparent;
}

Border Shorthand

/* border: width style color */
.box {
    border: 2px solid #333;
}

/* Individual sides */
.box {
    border-top: 3px dashed red;
    border-right: 1px solid blue;
    border-bottom: 5px double green;
    border-left: 2px dotted yellow;
}

/* Common pattern - only bottom border */
.underline {
    border-bottom: 2px solid #007bff;
}

Border Radius

/* All corners */
.rounded {
    border-radius: 10px;
}

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

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

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

/* Pill shape */
.pill {
    border-radius: 50px;
}

📍 Margin

Space outside the border (between elements).

/* All sides */
.box {
    margin: 20px;
}

/* Vertical | Horizontal */
.box {
    margin: 20px 40px;
}

/* Top | Horizontal | Bottom */
.box {
    margin: 10px 20px 30px;
}

/* Top | Right | Bottom | Left */
.box {
    margin: 10px 20px 30px 40px;
}

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

/* Auto (centering) */
.centered {
    width: 800px;
    margin: 0 auto;  /* Center horizontally */
}

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

Margin Collapse

/* Vertical margins collapse */
.box1 {
    margin-bottom: 30px;
}

.box2 {
    margin-top: 20px;
}

/* Actual margin between boxes: 30px (not 50px!) */
/* The larger margin wins */

/* Horizontal margins don't collapse */
.inline-box {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
}
/* Total horizontal spacing: 20px */

📦 Box Sizing

/* Content-box (default) */
.content-box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Total width = 300 + 20 + 20 + 5 + 5 = 350px */

/* Border-box (recommended) */
.border-box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Total width = 300px (includes padding and border) */
/* Content width = 300 - 20 - 20 - 5 - 5 = 250px */

/* Best practice: Apply to all elements */
* {
    box-sizing: border-box;
}

/* Or more specific */
*,
*::before,
*::after {
    box-sizing: border-box;
}

🎯 Practical Examples

/* Card component */
.card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px;
    box-sizing: border-box;
}

/* Button with spacing */
.button {
    padding: 12px 24px;
    border: 2px solid #007bff;
    border-radius: 5px;
    margin: 10px 5px;
}

/* Container with max-width */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Spaced sections */
section {
    margin-bottom: 60px;
    padding: 40px 0;
}

section:last-child {
    margin-bottom: 0;
}

/* Image with border */
img {
    width: 100%;
    height: auto;
    border: 3px solid #eee;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
}

/* Input fields */
input[type="text"] {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

input[type="text"]:focus {
    border-color: #007bff;
    outline: none;
}

/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.m-3 { margin: 24px; }

.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

🎯 Key Takeaways