The margin-property allows to set the margins to the sides individually or one can create margins for multiple sides simultaneously. In this descriptive guide, the margin property in CSS is explained and has the following learning outcomes.
- working of margin property in CSS
- working of the margin shorthand property
- usage of margin property with examples
How margin property works in CSS
Margin property in CSS can work in various circumstances where you have to either give margins to the sides (individually) or give margins using shorthand property(multiple sides at once). The working in both situations is discussed here.
The margin can be given to individual sides by using the syntax accordingly.
selector {margin-bottom: value;}Â Â Â Â Â Â Â Â Â //on the bottom side
selector {margin-left: value;}Â Â Â Â Â Â Â Â Â Â Â //on the left side
selector {margin-right: value;}Â Â Â Â Â Â Â Â Â Â //on the right side
The selector can be any element whereas the value is the number used to give a specific margin limit. The value can be used with several measuring units i.e., auto, length(px, cm, pt), percentage(%), and inherit (as per the parent class). The px is the absolute measurement whereas the em, rem and percentage are the relative measures and are better (when compared with px) suitable for responsive results.
Apart from these individual side’s margins, the margin shorthand property can also be used to give the margins to multiple sides simultaneously. The syntax of the margin shorthand property is provided below:
The value1, value2, value3, and value4 represent the top, right, bottom, and left sides of an element.
How to use margin property in CSS
This section provides a few examples that show the usage of margin property in CSS.
Example 1: Giving margins to individual sides
In this example, the code written below is used to give margins to individual sides.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Margin Property in CSS </title>
</head>
<style type="text/css">
div{
width: 45%;
float: left;
border-style: double;
}
.top{
background-color: aliceblue;
margin-top: 5px;
}
.rig{
background-color: lightgreen;
margin-right: 5px;
}
.bot{
background-color: aqua;
margin-bottom: 5px;
}
.lef{
background-color: wheat;
margin-left: 5px;
}
</style>
<body>
<h2> Margin property in CSS </h2>
<div class="rig"> using margin right of 5px </div>
<div class="bot"> using margin bottom of 5px </div>
<div class="top"> using margin top of 5px </div>
<div class="lef"> using margin left of 5px </div>
</body>
</html>
The description of the code is provided below
- a CSS styling for div’s is defined by giving width, float property and border
- four CSS classes are created named “top”, “rig”, “bot” and “lef” that contains the margin(5px) in each class
- these four classes are used inside the divisions (div’s)
The image of the code is shown below
Output:
Example 2: Giving margins to multiple sides simultaneously
The above example provided the margins to the individual sides. The following code gives margin to multiple sides simultaneously
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Margin Property in CSS </title>
</head>
<style type="text/css">
.sing{Â Â Â Â Â Â background-color: yellow;
margin: 5%;
}
.doub{
background-color: lightgreen;
margin: 5% 10%;
}
.trip{
background-color: aqua;
margin:2em 4em 3em;
}
.all{
background-color: wheat;
margin: 2px 4px 6px 8px;
}
</style>
<body>
<h2> Margin property in CSS </h2>
<div class="sing"> using margin of 5% on all sides </div>
<div class="doub"> using 5% margin on top/bottom and 10% on left/right </div>
<div class="trip"> using margin of 2 and 3em to top and bottom and 4em to right/left </div>
<div class="all"> using margin of 2,4,6,8 pixels on top,right,bottom,left respectively </div>
</body>
</html>
The above code is described as
- four CSS classes are created named “sing”, “doub”, “trip” and “all”
- the “sin” class gives margin of % to all sides and “doub” class gives margin of 5% to top/bottom and 10% to right/left
- the “trip” class gives margin of 2em and 4em to top a bottom and 3em to right/left sides
- the “all” class gives margin of 2, 4, 6, and 8px to top, right, bottom, and left sides
The image of the code is shown below
Output:
From the above examples, you would have learned the applicability of margin property in following contexts:
- applying margin-property to all sides individually
- giving margins using the margin shorthand property
Conclusion
The margin property in CSS is practiced giving margins according to user-defined properties. This article demonstrates the working and usage of margin property in CSS. The margin property in CSS can be used to give margins to each side individually and the margin shorthand property can be used to give margins to multiple sides simultaneously.
