CSS Margin property is used to define the space around elements. It is totally transparent and doesn't have any background color. It clears a region around the component. Top, buttom, left and right margin can be changed independly utilizing separate properties.
You can remove this margin by setting the top and left margin to zero. Like the margin and border, the sizes of specific sides of the margin can be set utilizing margin-left , margin-right , margin-top , and margin-buttom .
All the margin properties can have the following values:
length - indicates a margin in px, pt, cm, and so forth
% - indicates a margin in % of the width of the containing component
inherit - indicates that the margin should to be inherited from the parent component
Let's see an example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
margin-top: 50px;
margin-right: 30px;
margin-bottom: 50px;
margin-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 50px, a right margin of 30px, a bottom margin of 50px, and a left margin of 80px.</div>
</body>
</html>
Output:
Try it here>
