HTML CSS – Margin Examples

0

Some examples demonstrating how to use CSS margins to control the space outside an element. The margin separates the element from other elements, and it is an important property for creating spacing between components of a webpage.

Example 1: Simple Margin

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Margin Example</title>
    <style>
        .simple-margin {
            width: 300px;
            padding: 20px;
            background-color: #f39c12;
            border: 2px solid #e67e22;
            margin: 30px; /* Adds 30px margin on all sides */
        }
    </style>
</head>
<body>
    <div class="simple-margin">
        <h3>Simple Margin Example</h3>
        <p>This div has a 30px margin around it.</p>
    </div>
</body>
</html>

Output:

  • A box with a 30px margin around it, creating space between the box and surrounding content.

Example 2: Different Margins for Each Side

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Margins Example</title>
    <style>
        .custom-margins {
            width: 300px;
            height: 150px;
            padding: 20px;
            background-color: #3498db;
            border: 2px solid #2980b9;
            margin: 40px 20px 10px 50px; /* Top, Right, Bottom, Left */
        }
    </style>
</head>
<body>
    <div class="custom-margins">
        <h3>Custom Margins Example</h3>
        <p>This div has different margins on each side: 40px top, 20px right, 10px bottom, and 50px left.</p>
    </div>
</body>
</html>

Output:

  • A blue box with different margins on each side: 40px on the top, 20px on the right, 10px on the bottom, and 50px on the left.

Example 3: Negative Margin

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Negative Margin Example</title>
    <style>
        .negative-margin {
            width: 300px;
            height: 150px;
            padding: 20px;
            background-color: #2ecc71;
            border: 2px solid #27ae60;
            margin-top: -30px; /* Negative margin on top */
        }
    </style>
</head>
<body>
    <div class="negative-margin">
        <h3>Negative Margin Example</h3>
        <p>This div has a negative margin on top, pulling it 30px upwards.</p>
    </div>
</body>
</html>

Output:

  • The green box is pulled upwards by 30px due to the negative margin applied on the top, making it overlap with the element above it.

Example 4: Auto Margin for Centering

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering with Margin</title>
    <style>
        .centered-box {
            width: 400px;
            height: 200px;
            padding: 20px;
            background-color: #e74c3c;
            border: 2px solid #c0392b;
            margin: 50px auto; /* Center horizontally with 'auto' margin */
        }
    </style>
</head>
<body>
    <div class="centered-box">
        <h3>Centering Box with Margin</h3>
        <p>This div is centered horizontally using 'margin: auto'.</p>
    </div>
</body>
</html>

Output:

  • A red box centered horizontally on the page, with a margin of 50px on the top and bottom and auto on the left and right to center it.

Example 5: Margin Collapse (Vertical Margins)

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin Collapse Example</title>
    <style>
        .collapsed-margin {
            background-color: #f1c40f;
            padding: 20px;
            margin-top: 30px;
            margin-bottom: 40px; /* Vertical margins collapse */
        }

        .next-element {
            background-color: #8e44ad;
            padding: 20px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="collapsed-margin">
        <h3>Margin Collapse</h3>
        <p>This element has top and bottom margins. The margin collapse may occur between vertically adjacent elements.</p>
    </div>

    <div class="next-element">
        <h3>Next Element</h3>
        <p>This is the next element after the first. Notice the vertical margin collapse effect.</p>
    </div>
</body>
</html>

Output:

  • The top and bottom margins of adjacent elements collapse, so the combined space between the two divs is 40px instead of 80px (30px + 40px). This is the default behavior of vertical margins in CSS.

Example 6: Margin on Inline Elements

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin on Inline Elements</title>
    <style>
        .inline-elements {
            background-color: #34495e;
            padding: 10px;
            margin-right: 15px; /* Right margin on inline block */
            color: white;
        }
    </style>
</head>
<body>
    <span class="inline-elements">Inline Element 1</span>
    <span class="inline-elements">Inline Element 2</span>
    <span class="inline-elements">Inline Element 3</span>
</body>
</html>

Output:

  • Three inline elements (<span>) with a right margin of 15px, creating space between each element.

Example 7: Margin with Flexbox (Even Spacing Between Items)

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox with Margin</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between; /* Even space between items */
            margin: 20px;
        }

        .flex-item {
            width: 30%;
            padding: 20px;
            background-color: #9b59b6;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

Output:

  • Three flex items with even space between them due to the justify-content: space-between property. The margin applied to the container adds space around the entire flex layout.

Summary of Margin in CSS:

  • margin: Creates space outside an element between it and surrounding elements.
  • Shorthand: You can specify one value for all sides, two values (top/bottom and left/right), three values (top, left/right, bottom), or four values (top, right, bottom, left).
  • Negative Margin: You can use negative values to pull elements closer or cause them to overlap.
  • Auto Margin: Useful for centering elements horizontally (e.g., margin: 0 auto;).
  • Margin Collapse: When two vertical margins (top and bottom) meet, they collapse into the larger of the two values.

Margins are a powerful tool in controlling layout and spacing on your page, making it easier to organize and design elements neatly.