Margin Property
In CSS, a margin is a space around an HTML element. The margin value determines how much space there is around the HTML element. The browser uses a margin as a starting point for determining the position of an adjacent element on a web page. By placing some space around them, these are useful for arranging our HTML components in a nice manner.
When there are no defined borders surrounding an element, space is created using the CSS margin attributes. You have complete control over the margins via CSS. Each side of an element can have its margin set using attributes (top, right, bottom, and left).
Example:
//Html
<body>
<div></div>
</body>Without margin property output
With margin property output
div{
margin : 15px;
}
Syntax of margin property
A margin value and a margin property name are used to assign a margin in CSS. The direction of the HTML element on which the margin value is applied is determined by the margin attribute, which can be any of the following top, right, bottom, and left margins.
//Example
margin : margin value;
margin-left : 12px;
margin-top : 15px;A fixed number can be used for the CSS margin. margin-top: value; value may be entered as px, pt, em, rem, etc. in this field. or a percentage of the dimensions of the parent component. either a percentage or a term as the margin-top: Keywords; in this context include auto, inherit, initial, revert, and unset. The margin’s auto setting is the default. As a result, the browser is left to determine the margin value automatically.
margin-top : 10%;
margin-right : auto;
margin-bottom : 20px;
margin-left : 1em;Margin Constituent Properties
The HTML element box has four margin attributes, one for each side. The first one, margin-top, builds up the element’s top margin. The second option, margin-right, rises the element’s right margin space. In a same way, margin-bottom and margin-left add margin space to the bottom and left, respectively, of the element.
Example:
div{
margin-top: 40px;
margin-right: 20px;
margin-bottom:20px;
margin-left:40px;
}
We are setting a margin of 40 pixels on the top and left, as well as 20 pixels on the right and bottom, of the div element in this example.
Height and Width property in CSS
Margin Shorthand Property
Assigning several margin properties to an element with a single declaration is possible thanks to the shorthand margin property. When the same margin value needs to be specified on specific edges of the element, it is useful.
These are simple and let us avoid writing some unnecessary lines of code.We can utilise several shorthand CSS margin representations to save time and effort instead of having to define the margin value for each side individually.
//Single value
margin : value1;If we assign a single value to the margin, then it’s for all four sides of the html element.
//Two values
margin : value1 value2;If we assign two values to the margin, then the first value applies to the top and bottom sides and the second value applies to the left and right sides of the html element.
//Three values
margin : value1 value2 value3;If we assign three values to the margin, then the first value applies to the top side and the second value applies to the left and right sides and the third value applies to the bottom side of the html element.
//Four values
margin : value1 value2 value3 value4;If we assign four values to the margin, then the first value applies to the top side and the second value applies to the right side and the third value applies to the bottom side and the fourth value applies to the left side of the html element(clock wise).
Margin Collapse
There are instances where two neighbouring components’ top and bottom margins are combined into a single margin whose thickness is equal to the bigger of the two margin values. The vertical margins are connected to the CSS concept of collapsing margins (margin-top and margin-bottom properties). The horizontal margins don’t happen.
Example:
.first{
margin: 0 0 40px 0;
}
.second{
margin: 30px 0 0 0;
}
In the example above, the div with class first has a bottom margin of 40px and the div with class second element has a top margin set to 30px. Commonense would seem to suggest that the vertical margin between the first and the second div would be a total of 70px (40px + 30px). But due to margin collapse, the actual margin ends up being 40px.
Conclusion
In the CSS Box Model, the margins are an essential characteristic. It is the extra space we use to surround an HTML element. There are four different margin properties: top, right, bottom, and left. In order to assign the margins without having to type them out for every each margin property, there is a specific method known as the shorthand margin property. When many values are needed for certain margin attributes, it is helpful. Please leave a comment if you have any questions or problems.
Thankyou for reading!
Written by : Vipin
Pingback: CSS Font Property — CodeShruta