CSS Box Model and Layout

The CSS Box Model

Every HTML element is a rectangular box with four areas:

+---------------------------+
|         MARGIN            |
|  +---------------------+  |
|  |      BORDER         |  |
|  |  +---------------+  |  |
|  |  |    PADDING    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | CONTENT |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

.box {
    width: 300px;       /* Content width */
    padding: 20px;      /* Inside spacing */
    border: 2px solid black;
    margin: 10px;       /* Outside spacing */
}
/* Total width = 300 + 40 + 4 + 20 = 364px */

box-sizing Property

/* Default: content-box — width = content only */
.default { box-sizing: content-box; }

/* Better: border-box — width includes padding + border */
* { box-sizing: border-box; }

Display Property

Positioning

/* Static (default) */
.static { position: static; }

/* Relative — offset from its normal position */
.relative { position: relative; top: 10px; left: 20px; }

/* Absolute — positioned relative to nearest positioned ancestor */
.absolute { position: absolute; top: 0; right: 0; }

/* Fixed — relative to viewport */
.fixed { position: fixed; bottom: 20px; right: 20px; }

/* Sticky — relative until scrolled past threshold */
.sticky { position: sticky; top: 0; }

Float and Clear

img { float: left; margin-right: 15px; }
.clearfix::after { content: ""; display: table; clear: both; }

Overflow

.container {
    width: 200px;
    height: 100px;
    overflow: auto;   /* scroll | hidden | visible */
}

Z-index and Stacking Context

.modal {
    position: fixed;
    z-index: 1000;   /* Higher = on top */
}

Key Takeaway: The CSS box model (content, padding, border, margin) defines how elements take up space. Use box-sizing: border-box globally and understand positioning modes for precise layouts.