Box Model and Positioning

The CSS Box Model

Every element in web design is a rectangular box. The CSS box model is like a set of nested boxes - imagine a gift with layers of wrapping! Understanding this concept is crucial for controlling layout and spacing.

Box Model Components

• Content: The actual content (text, images, etc.)
• Padding: Space between content and border
• Border: The edge of the element's box
• Margin: Space outside the border

/* Box Model Properties */
.box {
    /* Content dimensions */
    width: 300px;
    height: 200px;
    
    /* Padding */
    padding: 20px;
    
    /* Border */
    border: 5px solid black;
    
    /* Margin */
    margin: 10px;
}

Box Sizing

By default, width and height apply only to content. The total size includes padding and border. This can be confusing!

Default Box Model (content-box)

/* Default behavior */
.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Total width = 300 + 20*2 + 5*2 = 350px */

Border-box Model

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

Global Box-sizing Reset

/* Apply to all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

Margin and Padding

Individual Sides

/* Long form */
.element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}

Shorthand Properties

/* All sides equal */
.element {
    margin: 10px;
    padding: 5px;
}

/* Vertical | Horizontal */
.element {
    margin: 10px 20px;
    padding: 5px 10px;
}

/* Top | Horizontal | Bottom */
.element {
    margin: 10px 20px 15px;
    padding: 5px 10px 8px;
}

/* Top | Right | Bottom | Left (clockwise) */
.element {
    margin: 10px 20px 15px 25px;
    padding: 5px 10px 8px 12px;
}

Margin Collapse

Vertical margins between adjacent elements collapse to the larger value:

/* These margins collapse */
.box1 {
    margin-bottom: 20px;
}

.box2 {
    margin-top: 30px;
}
/* Result: 30px gap, not 50px */

Auto Margins

/* Center horizontally */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Push to right */
.item {
    margin-left: auto;
}

/* Equal spacing */
.flex-item {
    margin: auto;
}

Border Properties

Border Styles

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

/* Shorthand */
.box {
    border: 2px solid #333;
}

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

Border Styles

.border-examples {
    border-style: solid;    /* ─────── */
    border-style: dashed;   /* - - - - */
    border-style: dotted;   /* ....... */
    border-style: double;   /* ═══════ */
    border-style: groove;   /* 3D groove */
    border-style: ridge;    /* 3D ridge */
    border-style: inset;    /* 3D inset */
    border-style: outset;   /* 3D outset */
    border-style: none;     /* No border */
}

Border Radius

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

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

/* Circle */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* Elliptical corners */
.ellipse {
    border-radius: 50px / 25px;
}

Display Property

The display property determines how an element behaves in the document flow.

Common Display Values

/* Block element */
.block {
    display: block;
    /* Takes full width, starts on new line */
}

/* Inline element */
.inline {
    display: inline;
    /* Only takes needed width, flows with text */
}

/* Inline-block */
.inline-block {
    display: inline-block;
    /* Like inline but accepts width/height */
}

/* None - removes element */
.hidden {
    display: none;
}

CSS Positioning

The position property controls how elements are positioned in the document.

Position Values

1. Static (Default)

/* Default positioning */
.static {
    position: static;
    /* Normal document flow */
}

2. Relative

/* Positioned relative to normal position */
.relative {
    position: relative;
    top: 20px;
    left: 30px;
    /* Moves 20px down, 30px right from original position */
}

3. Absolute

/* Positioned relative to nearest positioned parent */
.parent {
    position: relative;
}

.absolute {
    position: absolute;
    top: 0;
    right: 0;
    /* Top-right corner of parent */
}

4. Fixed

/* Positioned relative to viewport */
.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Stays in bottom-right corner when scrolling */
}

5. Sticky

/* Hybrid of relative and fixed */
.sticky {
    position: sticky;
    top: 0;
    /* Sticks to top when scrolling past */
}

Z-Index and Stacking Context

Z-index controls the stacking order of positioned elements (elements with position other than static).

/* Stacking elements */
.back {
    position: absolute;
    z-index: 1;
}

.middle {
    position: absolute;
    z-index: 2;
}

.front {
    position: absolute;
    z-index: 3;
}

/* Negative z-index */
.behind {
    position: relative;
    z-index: -1;
}

Stacking Context

Elements create a new stacking context when they have:

• position: absolute/relative with z-index
• position: fixed/sticky
• opacity less than 1
• transform, filter, or other CSS properties

Float and Clear

Floats were originally for wrapping text around images but became a layout tool (now largely replaced by Flexbox and Grid).

/* Float an image */
.image {
    float: left;
    margin-right: 20px;
}

/* Float for layout (old method) */
.column {
    float: left;
    width: 33.33%;
}

/* Clear floats */
.clear {
    clear: both;
}

/* Clearfix hack */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Overflow

Controls what happens when content is too large for its container.

/* Overflow values */
.container {
    overflow: visible; /* Default - content overflows */
    overflow: hidden;  /* Clips overflow */
    overflow: scroll;  /* Always show scrollbars */
    overflow: auto;    /* Scrollbars when needed */
}

/* Individual axes */
.container {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Text overflow */
.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Shows ... */
}

Visibility and Opacity

/* Visibility */
.invisible {
    visibility: hidden;
    /* Element hidden but takes up space */
}

.visible {
    visibility: visible;
}

/* Opacity */
.transparent {
    opacity: 0;     /* Fully transparent */
}

.semi-transparent {
    opacity: 0.5;   /* 50% transparent */
}

.opaque {
    opacity: 1;     /* Fully opaque */
}

/* Comparison */
.display-none {
    display: none;          /* Removed from layout */
}

.visibility-hidden {
    visibility: hidden;     /* Hidden but takes space */
}

.opacity-zero {
    opacity: 0;            /* Invisible but interactive */
}

Practical Layout Examples

Centered Container

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Fixed Header

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Add padding to body to prevent content hiding */
body {
    padding-top: 60px; /* Height of header */
}

Modal Overlay

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 10000;
}

Card Layout

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.card-content {
    margin-top: 15px;
}

.card-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

Common Layout Patterns