CSS Margin 0 Auto
CSS is all about presentation. Discover how CSS Margin 0 Auto works to transform plain HTML into a premium user experience in the guide below.
We will discuss the CSS margin in this article.
CSS Margin
The CSS margin represents the CSS attribute responsible for generating gaps surrounding the element's border. The "margin" attribute can consist of a single value, a pair of values, a trio of values, or a quartet of 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 subsequent value determines the equal margins on both the right and left sides.
Its third value sets the bottom margin.
Syntax:
Margin: top right-left bottom;
When the margin has four values:
It is the abbreviated property that can be used to define various margins on each side.
Syntax:
Margin: top right bottom left;
In CSS, there are distinct properties for margin. It is possible to define the margin separately for each side, such as top, bottom, left, and right.
Margin-top
It is utilized to set the margin from the top .
Syntax:
margin-top: length;
Margin-right
It is utilized to set the margin from the right .
Syntax:
margin-right: length;
Margin-bottom
It is used to specify the distance from the bottom margin.
Syntax:
margin-bottom: length;
Margin-left
It is utilized to set the margin from the left .
Syntax:
margin-left: length;
Auto Margin
It is used to align the element in the center horizontally.
Syntax:
margin: auto;
Illustrations of the CSS Margin
Let's explore CSS margin through practical examples.
Illustration 1:
We will make use of the CSS margin property and assign either a single value, a pair of values, a trio of values, or a quartet of 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 result where we can observe the application of the CSS margin attribute.
Illustration 2:
We will adjust the spacing on different edges by using the specific CSS margin attribute.
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 observe the space around distinct elements in the downward direction by employing the specific CSS margin attribute.
Illustration 3:
In this demonstration, we will explore how to make use of the CSS margin attribute by assigning it the "auto" value.
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 observe the application of the CSS margin set to "auto" in the following output.
margin: 0 auto
It maintains a 0 margin at the top and bottom, while applying an auto margin on the right and left sides.
Illustrations of the CSS Margin when the Value is Set to 0 and auto:
We will explore the implications of setting the margin value to 0 and auto.
Illustration 1:
We will explore the CSS margin attribute when it is set to 0 and auto values.
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 result where we can observe the <div> element being positioned at the center horizontally by employing the CSS margin property.
Illustration 2:
We are going to establish the margin of a table as 0 and automatic.
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 result displaying the table centered horizontally by employing the CSS margin attribute.
Illustration 3:
We are going to adjust the margin of the list to 0 and automatic.
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 result where we observe the list horizontally centered by employing the CSS margin attribute.
Browsers Support
Following are the browsers that support the CSS margin property:
- Microsoft Edge
- Opera
- Safari
- Google Chrome
- Firefox
Conclusion
In this guide, we have explored the CSS margin property with the value of 0 auto. These specific values are used to horizontally center an HTML element within its container. Detailed explanations and practical demonstrations have been provided to clarify the usage of the CSS margin property.
