CSS 💻 17 - margin, padding and border properties - KandZ

These three properties are the foundation of the CSS Box Model. They control the spacing around elements (margin), the spacing inside elements (padding), and the outline of elements (border).

Overview of the Three Properties

Property	Description	Where It Applies
`margin`	Space outside the border	Between the element and its neighbors
`padding`	Space inside the border	Between the content and the border
`border`	Line around the padding and content	Surrounds the element

Visual Representation

┌─────────────────────────────────────────────┐
│                   MARGIN                    │
│  ┌───────────────────────────────────────┐  │
│  │               BORDER                  │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │            PADDING              │  │  │
│  │  │  ┌───────────────────────────┐  │  │  │
│  │  │  │         CONTENT           │  │  │  │
│  │  │  └───────────────────────────┘  │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
└─────────────────────────────────────────────┘

1. Margin

The margin property specifies the space around an element (outside the border).

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

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

Shorthand Values

Values	Top	Right	Bottom	Left
`margin: 20px;`	20px	20px	20px	20px
`margin: 10px 20px;`	10px	20px	10px	20px
`margin: 10px 20px 30px;`	10px	20px	30px	20px
`margin: 10px 20px 30px 40px;`	10px	20px	30px	40px

Values

Value	Description	Example
`length`	Fixed margin (px, em, rem)	`margin: 20px;`
`percentage`	Percentage of parent width	`margin: 10%;`
`auto`	Browser calculates the margin	`margin: 0 auto;`
`negative`	Negative margin	`margin: -10px;`

2. Padding

The padding property specifies the space between the border and the content (inside the border).

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

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

Shorthand Values

Values	Top	Right	Bottom	Left
`padding: 20px;`	20px	20px	20px	20px
`padding: 10px 20px;`	10px	20px	10px	20px
`padding: 10px 20px 30px;`	10px	20px	30px	20px
`padding: 10px 20px 30px 40px;`	10px	20px	30px	40px

Values

Value	Description	Example
`length`	Fixed padding (px, em, rem)	`padding: 20px;`
`percentage`	Percentage of parent width	`padding: 10%;`

Important: Padding adds to the total size of the element (in the standard box model). Negative padding is not allowed.

3. Border

The border property is a shorthand for border-width, border-style, and border-color.

/* Shorthand: width | style | color */
.box-border {
    border: 1px solid #000;
}

.box-border-dashed {
    border: 2px dashed red;
}

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

Shorthand Order

border: <border-width> <border-style> <border-color>;

border-width Values

Value	Description	Example
`thin`	Thin border (1px)	`border-width: thin;`
`medium`	Medium border (3px)	`border-width: medium;`
`thick`	Thick border (5px)	`border-width: thick;`
`length`	Custom width	`border-width: 2px;`

border-style Values

Style	Description	Example
`none`	No border	`border-style: none;`
`hidden`	Hidden border (like none)	`border-style: hidden;`
`dotted`	Dotted line	`border-style: dotted;`
`dashed`	Dashed line	`border-style: dashed;`
`solid`	Solid line (default)	`border-style: solid;`
`double`	Double line	`border-style: double;`
`groove`	3D grooved effect	`border-style: groove;`
`ridge`	3D ridged effect	`border-style: ridge;`
`inset`	3D inset effect	`border-style: inset;`
`outset`	3D outset effect	`border-style: outset;`

border-color Values

Value	Description	Example
Named	Color names	`border-color: red;`
Hex	Hexadecimal	`border-color: #FF0000;`
RGB/RGBA	RGB values	`border-color: rgb(255, 0, 0);`
HSL/HSLA	HSL values	`border-color: hsl(0, 100%, 50%);`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin, Padding, and Border</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 2px dashed #ddd;
            background: #f8f9fa;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== MARGIN DEMOS ====== */
        .margin-all {
            width: 250px;
            height: 80px;
            background-color: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px;
            border-radius: 4px;
        }

        .margin-individual {
            width: 250px;
            height: 80px;
            background-color: #28a745;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px;
            border-radius: 4px;
        }

        /* ====== PADDING DEMOS ====== */
        .padding-all {
            width: 250px;
            height: 80px;
            background-color: #ffc107;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border: 2px solid #d4a017;
            border-radius: 4px;
        }

        .padding-individual {
            width: 250px;
            height: 80px;
            background-color: #dc3545;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
            border: 2px solid #a71d2a;
            border-radius: 4px;
        }

        /* ====== BORDER DEMOS ====== */
        .border-solid {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid #000;
            border-radius: 4px;
        }

        .border-dashed {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px dashed #dc3545;
            border-radius: 4px;
        }

        .border-dotted {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px dotted #007bff;
            border-radius: 4px;
        }

        .border-double {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px double #28a745;
            border-radius: 4px;
        }

        .border-groove {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px groove #6c5ce7;
            border-radius: 4px;
        }

        .border-ridge {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px ridge #ffc107;
            border-radius: 4px;
        }

        .border-inset {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px inset #17a2b8;
            border-radius: 4px;
        }

        .border-outset {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px outset #dc3545;
            border-radius: 4px;
        }

        .border-individual {
            width: 250px;
            height: 80px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 3px solid #007bff;
            border-right: 3px dashed #28a745;
            border-bottom: 3px dotted #dc3545;
            border-left: 3px double #ffc107;
            border-radius: 4px;
        }

        /* ====== VISUAL BOX MODEL ====== */
        .box-model-demo {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .box-model-item {
            text-align: center;
        }

        .box-model-item .box {
            width: 150px;
            height: 100px;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin: 10px auto;
            font-weight: bold;
        }

        .box-model-item .box.with-margin {
            background: #28a745;
            margin: 30px;
        }

        .box-model-item .box.with-padding {
            background: #ffc107;
            color: #333;
            padding: 30px;
            width: 150px;
            height: 100px;
            box-sizing: content-box;
        }

        .box-model-item .box.with-border {
            background: #dc3545;
            border: 8px solid #333;
        }
    </style>
</head>
<body>

    <h1>Margin, Padding, and Border Properties</h1>

    <!-- ====== 1. MARGIN ====== -->
    <section>
        <h2>1. Margin</h2>
        <p>The <code>margin</code> property specifies the space <strong>outside</strong> the border.</p>

        <h3>All Sides (margin: 20px)</h3>
        <div class="demo-box">
            <div class="margin-all">
                margin: 20px (all sides)
            </div>
            <p>Space around the element is 20px on all sides.</p>
        </div>

        <h3>Individual Sides</h3>
        <div class="demo-box">
            <div class="margin-individual">
                margin: top=10px | right=20px | bottom=30px | left=40px
            </div>
            <p>Each side has a different margin value.</p>
        </div>

        <div class="code-block">
            /* All sides */
            margin: 20px;

            /* Vertical | Horizontal */
            margin: 10px 20px;

            /* Top | Horizontal | Bottom */
            margin: 10px 20px 30px;

            /* Top | Right | Bottom | Left */
            margin: 10px 20px 30px 40px;

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

            /* Auto margins (centers block elements) */
            margin: 0 auto;
        </div>
    </section>

    <!-- ====== 2. PADDING ====== -->
    <section>
        <h2>2. Padding</h2>
        <p>The <code>padding</code> property specifies the space <strong>inside</strong> the border.</p>

        <h3>All Sides (padding: 20px)</h3>
        <div class="demo-box">
            <div class="padding-all">
                padding: 20px (all sides)
            </div>
            <p>Space between content and border is 20px on all sides.</p>
        </div>

        <h3>Individual Sides</h3>
        <div class="demo-box">
            <div class="padding-individual">
                padding: top=10px | right=20px | bottom=30px | left=40px
            </div>
            <p>Each side has a different padding value.</p>
        </div>

        <div class="code-block">
            /* All sides */
            padding: 20px;

            /* Vertical | Horizontal */
            padding: 10px 20px;

            /* Top | Horizontal | Bottom */
            padding: 10px 20px 30px;

            /* Top | Right | Bottom | Left */
            padding: 10px 20px 30px 40px;

            /* Individual sides */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
        </div>
    </section>

    <!-- ====== 3. BORDER ====== -->
    <section>
        <h2>3. Border</h2>
        <p>The <code>border</code> property is a shorthand for <code>border-width</code>, <code>border-style</code>, and <code>border-color</code>.</p>

        <h3>Border Styles</h3>
        <div class="demo-box">
            <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
                <div class="border-solid">solid</div>
                <div class="border-dashed">dashed</div>
                <div class="border-dotted">dotted</div>
                <div class="border-double">double</div>
                <div class="border-groove">groove</div>
                <div class="border-ridge">ridge</div>
                <div class="border-inset">inset</div>
                <div class="border-outset">outset</div>
            </div>
        </div>

        <h3>Individual Sides</h3>
        <div class="demo-box">
            <div class="border-individual">
                Different border on each side
            </div>
        </div>

        <div class="code-block">
            /* Shorthand: width | style | color */
            border: 1px solid #000;
            border: 2px dashed red;
            border: 3px dotted blue;
            border: 5px double green;
            border: 5px groove purple;
            border: 5px ridge orange;

            /* Individual sides */
            border-top: 2px solid blue;
            border-right: 3px dashed green;
            border-bottom: 4px dotted orange;
            border-left: 5px double purple;

            /* Individual properties */
            border-width: 2px;
            border-style: solid;
            border-color: #000;
        </div>
    </section>

    <!-- ====== 4. VISUAL BOX MODEL ====== -->
    <section>
        <h2>4. Visual Box Model</h2>
        <p>Compare the same box with different margin, padding, and border values.</p>

        <div class="box-model-demo">
            <div class="box-model-item">
                <h4>No Extra Space</h4>
                <div class="box">150 × 100</div>
                <p><small>margin: 0; padding: 0; border: none</small></p>
            </div>

            <div class="box-model-item">
                <h4>With Margin</h4>
                <div class="box with-margin">150 × 100</div>
                <p><small>margin: 30px</small></p>
            </div>

            <div class="box-model-item">
                <h4>With Padding</h4>
                <div class="box with-padding">150 × 100</div>
                <p><small>padding: 30px (content-box)</small></p>
            </div>

            <div class="box-model-item">
                <h4>With Border</h4>
                <div class="box with-border">150 × 100</div>
                <p><small>border: 8px solid #333</small></p>
            </div>
        </div>

        <div class="code-block">
            /* No extra space */
            .box {
                width: 150px;
                height: 100px;
                margin: 0;
                padding: 0;
                border: none;
            }

            /* With margin */
            .box {
                margin: 30px;
            }

            /* With padding */
            .box {
                padding: 30px;
                box-sizing: content-box; /* Padding adds to total size */
            }

            /* With border */
            .box {
                border: 8px solid #333;
            }
        </div>
    </section>

    <!-- ====== 5. REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>Shorthand Order</h3>
        <table class="reference-table">
            <tr>
                <th>Values</th>
                <th>Top</th>
                <th>Right</th>
                <th>Bottom</th>
                <th>Left</th>
            </tr>
            <tr>
                <td><code>margin: 20px;</code></td>
                <td>20px</td>
                <td>20px</td>
                <td>20px</td>
                <td>20px</td>
            </tr>
            <tr>
                <td><code>margin: 10px 20px;</code></td>
                <td>10px</td>
                <td>20px</td>
                <td>10px</td>
                <td>20px</td>
            </tr>
            <tr>
                <td><code>margin: 10px 20px 30px;</code></td>
                <td>10px</td>
                <td>20px</td>
                <td>30px</td>
                <td>20px</td>
            </tr>
            <tr>
                <td><code>margin: 10px 20px 30px 40px;</code></td>
                <td>10px</td>
                <td>20px</td>
                <td>30px</td>
                <td>40px</td>
            </tr>
        </table>

        <h3>Border Styles</h3>
        <table class="reference-table">
            <tr>
                <th>Style</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>solid</code></td>
                <td>Single solid line</td>
                <td><code>border: 2px solid black;</code></td>
            </tr>
            <tr>
                <td><code>dashed</code></td>
                <td>Dashed line</td>
                <td><code>border: 2px dashed red;</code></td>
            </tr>
            <tr>
                <td><code>dotted</code></td>
                <td>Dotted line</td>
                <td><code>border: 2px dotted blue;</code></td>
            </tr>
            <tr>
                <td><code>double</code></td>
                <td>Double line</td>
                <td><code>border: 4px double green;</code></td>
            </tr>
            <tr>
                <td><code>groove</code></td>
                <td>3D grooved effect</td>
                <td><code>border: 4px groove gray;</code></td>
            </tr>
            <tr>
                <td><code>ridge</code></td>
                <td>3D ridged effect</td>
                <td><code>border: 4px ridge gray;</code></td>
            </tr>
            <tr>
                <td><code>inset</code></td>
                <td>3D inset effect</td>
                <td><code>border: 4px inset gray;</code></td>
            </tr>
            <tr>
                <td><code>outset</code></td>
                <td>3D outset effect</td>
                <td><code>border: 4px outset gray;</code></td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>No border</td>
                <td><code>border: none;</code></td>
            </tr>
        </table>

        <h3>Border Width Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>thin</code></td>
                <td>Thin border (1px)</td>
                <td><code>border-width: thin;</code></td>
            </tr>
            <tr>
                <td><code>medium</code></td>
                <td>Medium border (3px)</td>
                <td><code>border-width: medium;</code></td>
            </tr>
            <tr>
                <td><code>thick</code></td>
                <td>Thick border (5px)</td>
                <td><code>border-width: thick;</code></td>
            </tr>
            <tr>
                <td><code>length</code></td>
                <td>Custom width</td>
                <td><code>border-width: 2px;</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 6. BEST PRACTICES ====== -->
    <section>
        <h2>6. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>margin</code> for spacing between elements</li>
                <li>Use <code>padding</code> for spacing inside elements</li>
                <li>Use shorthand properties to write cleaner code</li>
                <li>Use <code>margin: 0 auto</code> to center block elements</li>
                <li>Use <code>box-sizing: border-box</code> for predictable sizing</li>
                <li>Use <code>border-radius</code> to round corners</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use <code>margin</code> for internal spacing (use padding)</li>
                <li>Don't use <code>padding</code> for external spacing (use margin)</li>
                <li>Don't forget that padding adds to the total size (standard box model)</li>
                <li>Don't use negative padding (not allowed)</li>
                <li>Don't mix up margin and padding — they serve different purposes</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Description	Where It Applies
`margin`	Space outside the border	Between the element and its neighbors
`padding`	Space inside the border	Between the content and the border
`border`	Line around the padding and content	Surrounds the element

Shorthand Order

Values	Top	Right	Bottom	Left
`property: A;`	A	A	A	A
`property: A B;`	A	B	A	B
`property: A B C;`	A	B	C	B
`property: A B C D;`	A	B	C	D

Best Practices

✅ Do This:

/* Use margin for external spacing */
.card {
    margin-bottom: 20px;
}

/* Use padding for internal spacing */
.card {
    padding: 20px;
}

/* Center block elements */
.container {
    margin: 0 auto;
    max-width: 1200px;
}

/* Apply border-box globally */
*, *::before, *::after {
    box-sizing: border-box;
}

❌ Don’t Do This:

/* Don't use padding for external spacing */
.card {
    padding-bottom: 20px; /* Creates space inside, not outside */
}

/* Don't forget box-sizing */
.box {
    width: 100%;
    padding: 20px;
    border: 5px solid black;
    /* Total width exceeds 100%! */
}

/* Don't use negative padding */
.box {
    padding: -10px; /* Invalid! */
}

Pro Tip: Remember: margin is outside, padding is inside. Use margin to space elements apart, and padding to give content room to breathe. Always use box-sizing: border-box to make sizing more predictable. Use margin: 0 auto to center block elements horizontally!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

CSS 💻 17 – margin, padding and border properties

Overview of the Three Properties

Visual Representation

1. Margin

Shorthand Values

Values

2. Padding

Shorthand Values

Values

3. Border

Shorthand Order

border-width Values

border-style Values

border-color Values

Complete Example

Quick Reference

Shorthand Order

Best Practices

Ads Blocker Detected!!!