CSS Margin and Padding

Overview

Margin and padding are fundamental CSS properties for creating space around elements.

Margin

Basic Margin Properties

.element {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 30px;
}

/* Shorthand property */
.element {
    margin: 20px 30px 20px 30px; /* top right bottom left */
    margin: 20px 30px; /* top/bottom left/right */
    margin: 20px; /* all sides */
}

Auto Margin

.center-horizontal {
    margin-left: auto;
    margin-right: auto;
    width: 300px; /* Required for auto margin to work */
}

Negative Margin

.pull-up {
    margin-top: -10px; /* Pulls element up */
}

Padding

Basic Padding Properties

.element {
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
}

/* Shorthand property */
.element {
    padding: 15px 20px 15px 20px; /* top right bottom left */
    padding: 15px 20px; /* top/bottom left/right */
    padding: 15px; /* all sides */
}

Box Model Impact

.box-model-demo {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #ccc;
    margin: 30px;
    
    /* Total space taken:
       Width: 200px
       Height: 100px
       Padding: 40px (20px each side)
       Border: 10px (5px each side)
       Margin: 60px (30px each side)
    */
}

Common Patterns

Centering with Margin

.center-block {
    width: 300px;
    margin: 0 auto; /* Center horizontally */
}

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; }