CSS Margin 0 Auto

We will discuss the CSS margin in this article.

CSS Margin

The CSS margin is the CSS property that is utilized to create space outside the border of the element. The "margin" property can have one value, two values, three values, or four values.

When the margin has one value:

It sets the equal margins on all sides.

Syntax:

margin: length;</p>
<h3 class="h3">When the margin has two values:</h3>
<p>Its first value sets the equal top and bottom margins.</p>
<p>Its second value sets the equal right and left margins.</p>
<p><strong>Syntax:</strong></p>
<div class="codeblock"><textarea name="code" class="xml">
Margin: top-bottom right-left;

When the margin has three values:

Its first value sets the top margin.

Its second value sets the equal right & left margins.

Its third value sets the bottom margin.

Syntax:

When the margin has four values:

It is the shorthand property that can be utilized to set different margins on all sides.

Syntax:

In CSS, there are individual properties for margin. We can set the margin individually for individual sides, i.e., top, bottom, left, and right.

Margin-top

It is utilized to set the margin from the top.

Syntax:

Margin-right

It is utilized to set the margin from the right.

Syntax:

Margin-bottom

It is utilized to set the margin from the bottom.

Syntax:

Margin-left

It is utilized to set the margin from the left.

Syntax:

margin-left: length;

Auto Margin

It is utilized to set the element horizontally centered.

Syntax:

Illustrations of the CSS Margin

Let us understand the CSS margin with the help of the demonstrations.

Illustration 1:

We will utilize the CSS margin property and give it one value, two values, three values, or four values.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting margin using one value, two values, three values, and four values</title>
    <style>
        .div1 {
            border: 1px solid darkgreen;
            margin: 12px;
        }
        .div2 {
            border: 1px solid firebrick;
            margin: 12px 20px;
        }
        .div3 {
            border: 1px solid saddlebrown;
            margin: 25px 20px 5px;
        }
        .div4 {
            border: 1px solid orangered;
            margin: 17px 25px 35px 40px;
        }
    </style>
</head>
<body>
    <h2>When given one value:</h2>
    <h3>margin: 12px</h3>
    <div class="div1">We are giving one value to the margin property to set equal margins from all sides.</div>
    <h2>When given two values:</h2>
    <h3>margin: 12px 20px</h3>
    <div class="div2">We are giving two values to the margin property to set the equal top & bottom margins and equal right & left margins.</div>
    <h2>When given three values:</h2>
    <h3>margin: 25px 20px 5px</h3>
    <div class="div3">We are giving three values to the margin property to set the top margin, equal right & left margins, and bottom margin.</div>
    <h2>When given four values:</h2>
    <h3>margin: 17px 25px 35px 40px</h3>
    <div class="div4">We are giving four values to the margin property to set different margins on all sides.</div>
</body>
</html>

Output:

Here is the output where we can witness the utilization of the CSS margin property.

Illustration 2:

We will fix the margin of distinct sides utilizing applying the individual CSS margin property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing the margin of distinct sides with the usage of individual margin properties</title>
    <style>
        .div1 {
            border: 1px solid darkgreen;
            margin-top: 24px;
        }
        .div2 {
            border: 1px solid firebrick;
            margin-right: 32px;
        }
        .div3 {
            border: 1px solid saddlebrown;
            margin-bottom: 42px;
        }
        .div4 {
            border: 1px solid orangered;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h3>margin-top: 24px</h3>
    <div class="div1">We have set the top margin of this element by utilizing the margin-top property.</div>
    <h3>margin-right: 32px</h3>
    <div class="div2">We have adjusted the space on the right side of this element by utilizing the margin-right property.</div>
    <h3>margin-bottom: 42px</h3>
    <div class="div3">We have adjusted the space at the bottom of this element utilizing the margin-bottom property.</div>
    <h3>margin-left: 50px</h3>
    <div class="div4">We have applied the margin-left property and defined the top margin of this element.</div>
</body>
</html>

Output:

We can witness the gap on different sides of unique elements in the output downwards with the utilization of the individual CSS margin property.

Illustration 3:

In this demo, we will learn to utilize the CSS margin property by setting its value to "auto. "

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assigning the margin to auto by utilizing the CSS margin property</title>
    <style>
        body {
            background-color: lavenderblush;
        }
        div {
            border: 1px solid purple;
            width: 450px;
            margin: auto;
        }
    </style>
</head>
<body>
    <h3>margin: auto</h3>
    <div>We have put the margin of this element to auto by utilizing the margin property.</div>
</body>
</html>

Output:

We can witness the utilization of the CSS margin to "auto" in the output provided downwards.

margin: 0 auto

It keeps the 0 margin at the top & bottom and auto margin at the right and left.

Illustrations of the CSS Margin when the Value is Set to 0 and auto:

We will understand what happens when the margin value is 0 and auto.

Illustration 1:

We will comprehend the CSS margin property when the value is assigned to 0 and auto.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing the margin to 0 and auto by utilizing margin property</title>
    <style>
        body {
            background-color: rgb(244, 198, 176);
        }
        div {
            border: 1px solid purple;
            width: 250px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h3>margin: 0 auto</h3>
    <div>We have kept the margin to 0 from top & bottom and auto at the right & left by utilizing the margin property.</div>
</body>
</html>

Output:

Here is the output in which we can witness the <div> element horizontally centered utilizing the CSS margin property.

Illustration 2:

We will be setting the margin of a table to 0 and auto.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting the margin of the table to 0 and auto by using margin property</title>
    <style>
        body {
            background-color: beige;
        }
       table, th, tr, td {
            border: 2px solid green;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <caption>Electronic Gadgets Table</caption>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>1001</td>
                <td>Power Bank</td>
                <td>10</td>
                <td>10,000</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Laptop Charger</td>
                <td>5</td>
                <td>15,000</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>Wireless Earbuds</td>
                <td>20</td>
                <td>25,000</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>Portable Bluetooth Speaker</td>
                <td>9</td>
                <td>18,000</td>
            </tr>
        </table>
    </div>
</body>
</html>

Output:

Here is the output in which we can witness the table centered horizontally utilizing the CSS margin property.

Illustration 3:

We will be setting the margin of the list to 0 and auto.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting margin of the list to 0 and auto using margin property</title>
    <style>
        body {
            background-color: brown;
        }
        h3 {
            text-align: center;
            color: yellow;
        }
        ol {
            border: 1px solid yellow;
            width: 350px;
            color: yellow;
            margin: 0 auto;
        } 
    </style>
</head>
<body>
    <h3>List of dinner items</h3>
    <ol>
        <li>Dal Makhani</li>
        <li>Matar Paneer</li>
        <li>Chilli Paneer</li>
        <li>Chickpea Curry</li>
        <li>Fried Rice</li>
        <li>Pasta</li>
        <li>Pizza</li>
        <li>Dinner Salad</li>
        <li>Burger</li>
        <li>Palak Corn Sabzi</li>
    </ol>
</body>
</html>

Output:

Here is the output in which we can witness the list centered horizontally utilizing the CSS margin property.

Browsers Support

Following are the browsers that support the CSS margin property:

Microsoft Edge
Opera
Safari
Google Chrome
Firefox

Conclusion

In this article, we have understood the CSS margin 0 auto. The 0 and auto are the values that are given to the CSS margin property to center the HTML element horizontally. We have understood the CSS margin property with the help of demonstrations.

Next TopicCSS Select All Children

← prev next →