Updated June 9, 2023
Introduction to CSS Margin
CSS margin allows us to set the space between HTML elements for better presentation and cleaner UI. As per the latest CSS definitions, an element can give a margin at the top, bottom, left, and right sides. The margin value is set in pixels.
Margin Properties
Other than setting precise margin values, CSS also allows us to set the following values as margin properties:
- auto: With these options, we are letting the browser calculate the element’s margin
- length: As mentioned before, we can specify a precise margin in px, pt, cm, etc.
- %: We can specify margin value as a % of the width of the element containing it.
- inherit: With this; we specify that the element’s margin value should be inherited from that of its parent element
Setting Margin for Individual Sides in CSS
CSS allows us to set margin values individually for each side of the elements with the following properties:
- Margin-top: It sets the margin to the top of the element.
- Margin-bottom: It sets the margin to the bottom of the element.
- Margin-left: It sets a margin to the left of the element.
- Margin-right: It sets the margin to the right of the element.
Or we can also use the shorthand margin property in CSS to set the margin on all sides of the element with a single definition, as shown below:
Example #1
Margin: <margin top value > < margin-right value > < margin-bottom value > < margin-left value >
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.p1
{
margin-top: 100px;
}
.p2
{
margin-bottom: 100px;
}
.p3
{
margin-right: 150px;
}
.p4 {
margin-left: 80px;
}
Div {
background-color: yellow;
}
</style>
</head>
<body>
<h2>In this example, we are using individual margin properties</h2>
<div>
<p class="p1">
The world’s most popular programming languages in today’s era are
Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications.
C : C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility.
Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.
</p>
<p class="p2">
The world’s most popular programming languages in today’s era are
Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications.
C : C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility.
Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.
</p>
<p class="p3">
The world’s most popular programming languages in today’s era are
Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications.
C : C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility.
Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.
</p>
<p class="p4">
The world’s most popular programming languages in today’s era are
Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications.
C: C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility.
Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.
</p>
</div>
</body>
</html>Output:
The output of the above example in the browser window would be as follows:
Example #2
To set the margins of our choice in the above example, we had to define the margin values four times. Now let’s set the same margin values with margin shorthand property in the below example:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
Margin : 100px 150px 100px 80px; // defining all margin values in a single definition
}
</style>
</head>
<body>
<h2>In this example, we are using the short hand margin property </h2>
<div>
The world’s most popular programming languages in today’s era are
Java : Java has been holding position 1 or 2 for the world’s most popular languages since it’s inception. It was created in mid 90s and since then many large and small companies have adopted it for developing desktop and web applications.
C : C is a popular language for cars, sensors and embedded systems. It has been one of the top most popular languages mainly due to its universal compatibility.
Python : Python is very popular in today’s era specially since it support quick development of application based on machine learning, big data and AI.
</div>
</body>
</html>Output:
With the shorthand property, the output in the browser window would be as follows:
Conclusion
We can set the margin property of HTML elements either with individual properties like margin-left, margin-right, margin-top, and margin-bottom, or we can define all margin values with the help of margin shorthand value. Both will produce the same result. The only difference would be that the code with the shorthand property would be more efficient and easy to apply.
Recommended Articles
We hope that this EDUCBA information on “CSS Margin” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
