Box Model & Layout

The CSS Box Model is fundamental to understanding how spacing, sizing, and positioning work in CSS.

The Box Model

Every element in CSS is a box. The Box Model consists of four parts:

┌─────────────────────────────────────┐
│          Margin (outer space)       │
│  ┌─────────────────────────────┐    │
│  │   Border (edge)            │    │
│  │  ┌─────────────────────┐    │    │
│  │  │  Padding (inner)    │    │    │
│  │  │  ┌───────────────┐  │    │    │
│  │  │  │   Content     │  │    │    │
│  │  │  │   (width ×    │  │    │    │
│  │  │  │    height)    │  │    │    │
│  │  │  └───────────────┘  │    │    │
│  │  └─────────────────────┘    │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘

1. Content

The actual content (text, images, etc.)

div {
    width: 300px;     /* Content width */
    height: 200px;    /* Content height */
}

2. Padding

Space inside the border, around the content

div {
    padding: 20px;           /* All sides: 20px */
    padding: 10px 20px;      /* Top/Bottom 10px, Left/Right 20px */
    padding: 10px 15px 20px; /* Top 10px, Left/Right 15px, Bottom 20px */
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

3. Border

The edge around the padding

div {
    border: 2px solid black;      /* Width Style Color */
    
    /* Individual sides */
    border-top: 2px solid black;
    border-right: 3px dashed blue;
    border-bottom: 2px solid black;
    border-left: 3px dashed blue;
    
    /* Border styles: solid, dashed, dotted, double, groove, ridge, etc. */
    border-style: solid;
    border-color: navy;
    border-width: 3px;
    
    /* Border radius (rounded corners) */
    border-radius: 8px;           /* All corners */
    border-radius: 8px 0;         /* Top-left & bottom-right 8px */
    border-radius: 8px 12px 16px; /* Different values */
}

4. Margin

Space outside the border

div {
    margin: 20px;           /* All sides: 20px */
    margin: 10px 20px;      /* Top/Bottom 10px, Left/Right 20px */
    margin: 10px 15px 20px; /* Top 10px, Left/Right 15px, Bottom 20px */
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

Box Sizing

By default, width and height only apply to the content area.

/* Default: content-box */
div {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    /* Total width = 300 + 40 (padding) + 4 (border) = 344px */
}

/* Better: border-box */
div {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    /* Total width = 300px (includes padding and border) */
}

Recommendation: Apply border-box to all elements:

* {
    box-sizing: border-box;
}

Display Property

Controls how an element behaves in layout.

1. Block

Takes full width, stacks vertically

div {
    display: block;  /* Default for <div>, <p>, <h1>, etc. */
    width: 100%;
    margin: 20px 0;
}

Block elements:

• <div>, <p>, <h1>-<h6>, <section>, <header>, <footer>

2. Inline

Takes only necessary width, flows with text

span {
    display: inline;  /* Default for <span>, <a>, <strong>, etc. */
    width: 100px;     /* Ignored! */
    height: 50px;     /* Ignored! */
    padding: 10px;    /* Top/bottom ignored */
}

Inline elements:

• <span>, <a>, <strong>, <em>, <img>

3. Inline-Block

Flows inline but respects width, height, padding, and margin

button {
    display: inline-block;
    width: 100px;
    padding: 10px;
    margin: 5px;
}

4. Flex

Modern layout system (see Flexbox section)

.container {
    display: flex;
}

5. Grid

Modern grid layout system (see Grid section)

.container {
    display: grid;
}

6. None

Hides the element completely

.hidden {
    display: none;  /* Element is not rendered at all */
}

Position Property

Controls how elements are positioned on the page.

1. Static (Default)

Normal flow of the page

div {
    position: static;  /* Default */
    top: 10px;         /* Ignored */
    left: 10px;        /* Ignored */
}

2. Relative

Positioned relative to its normal position

div {
    position: relative;
    top: 10px;    /* Move 10px down from normal position */
    left: 20px;   /* Move 20px right from normal position */
}

Elements still take up space in normal flow.

3. Absolute

Positioned relative to nearest positioned ancestor

<div style="position: relative;">  <!-- Parent -->
    <div style="position: absolute; top: 10px; left: 20px;">
        This div is positioned absolutely
    </div>
</div>

Elements are removed from normal flow.

4. Fixed

Positioned relative to the viewport (stays in place when scrolling)

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: navy;
    color: white;
}

Perfect for navigation bars, modals, etc.

5. Sticky

Toggles between relative and fixed based on scroll position

.header {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: 1px solid gray;
}

Stays in place when scrolling past the element.

Z-index

Controls stacking order (which element appears on top)

.background {
    position: absolute;
    z-index: 1;  /* Lower number = behind */
}

.modal {
    position: absolute;
    z-index: 10; /* Higher number = in front */
}

.tooltip {
    position: absolute;
    z-index: 20; /* Highest = on top */
}

Only works with positioned elements (position: absolute, relative, fixed, etc.)

Overflow

Controls what happens when content exceeds container size

div {
    width: 300px;
    height: 200px;
    overflow: visible;   /* Default: content overflows */
    overflow: hidden;    /* Content is clipped */
    overflow: scroll;    /* Always shows scrollbars */
    overflow: auto;      /* Shows scrollbars only when needed */
}

Per-axis:

div {
    overflow-x: auto;   /* Horizontal scrolling */
    overflow-y: hidden; /* Vertical hidden */
}

Real-World Example: Card Layout

<style>
    * {
        box-sizing: border-box;
    }
    
    .card {
        width: 300px;
        margin: 20px auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .card-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .card-content {
        padding: 20px;
    }
    
    .card-title {
        margin: 0 0 10px 0;
        font-size: 20px;
        font-weight: bold;
    }
    
    .card-description {
        margin: 0;
        color: #666;
        line-height: 1.6;
    }
    
    .card-footer {
        padding: 15px 20px;
        border-top: 1px solid #eee;
        display: flex;
        gap: 10px;
    }
    
    .btn {
        flex: 1;
        padding: 10px;
        border: none;
        background-color: #0066cc;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

<div class="card">
    <img src="image.jpg" class="card-image">
    <div class="card-content">
        <h2 class="card-title">Card Title</h2>
        <p class="card-description">This is a beautiful card with proper spacing and layout.</p>
    </div>
    <div class="card-footer">
        <button class="btn">Save</button>
        <button class="btn">Share</button>
    </div>
</div>

Best Practices

1. Use box-sizing: border-box - Makes sizing more predictable
2. Use margin to separate elements - Use padding for internal space
3. Use display: flex instead of floats - Flexbox is more modern
4. Avoid absolute positioning - Use flex/grid when possible
5. Use relative positioning for adjustments - Not for major layout
6. Keep specificity low - Use simple selectors

Next Steps

Master the Box Model, then move on to:

1. Flexbox & Grid - Modern layout systems
2. Responsive Design - Mobile-friendly layouts
3. Styling & Typography - Colors, fonts, and visual design