CSS Margins:-
Basically, we use margin to create space around the elements, outside of any defined border.
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid blue;
margin: 50px;
}
</style>
</head>
<body>
<h1> CSS Margin </h1>
<div> This is a paragraph. It has a 50px margin.</div>
</body>
</html>
Try this code for a better experience
CSS Margin:-
The CSS margin properties are used to create areas around factors, outdoor of any defined borders.
With CSS, you have got full control over the margins. There are houses for setting the margin for every side of an element (top, right, bottom, and left).
Margin Individual Side:-
CSS has residences for specifying the margin for every facet of a detail:
- margin-top
- margin-right
- margin-bottom
- margin-left
All the margin properties can have the following values:
- auto - the browser calculates the margin
- length - specifies the margin in px, pt, cm, etc
- % - specifies the margin in % according the the element or requirement
- inherit - specifies that the margin should be inherited from the parent element
TIP:- Negative values are allowed.
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid blue;
margin-top: 100px;
margin-right: 150px;
margin-bottom: 100px;
margin-left: 80px;
}
</style>
</head>
<body>
<h1> Using Individual Margin Property </h1>
<div> This div element has a top 100px margin, has a right 150px margin, has a left 80px margin, and has a bottom margin 100px.</div>
</body>
</html>
Try this code for a better experience
Margin Shorthand Property:-
To shorten the code, it's far more feasible to specify all the margin residences in one belonging.
The margin belongings is a shorthand belonging for the following man or woman margin houses:
- margin-top
- margin-right
- margin-bottom
- margin-left
So, here is how it works:
If the margin property has four values.
- margin 25px 50px 75px 100px
- here top margin is 25px
- here right margin is 50px
- here bottom margin is 75px
- here left margin is 100px
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid red;
margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 100px;
}
</style>
</head>
<body>
<h1> CSS Margin Shorthand Property 4 Values </h1>
<p> This paragraph has a top 25px margin, has a right 50px margin, has a bottom 75px margin, and has a left 100px margin.</p>
</body>
</html>
Try this code for a better experience
If the margin property has three values.
- margin 25px 50px 75px
- here top margin is 25px
- here right and left margins are 50px
- here bottom margin is 75px
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid red;
margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
}
</style>
</head>
<body>
<h1> CSS Margin Shorthand Property 3 Values </h1>
<p> This paragraph has a top 25px margin, has a right 50px margin, and has a bottom 75px margin.</p>
</body>
</html>
Try this code for a better experience
If the margin property has two values.
- margin 25px 50px
- here top and bottom margins are 25px
- here right and left margins are 50px
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid red;
margin-top: 25px;
margin-right: 50px;
}
</style>
</head>
<body>
<h1> CSS Margin Shorthand Property 2 Values </h1>
<p> This paragraph has a top 25px margin, and has a right 50px margin.</p>
</body>
</html>
Try this code for a better experience
If the margin property has one value.
- margin 25px
- here all the margins are 25px
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid red;
margin-top: 25px;
}
</style>
</head>
<body>
<h1> CSS Margin Shorthand Property 1 Values </h1>
<p> This paragraph has a top 25px margin.</p>
</body>
</html>
Try this code for a better experience
The Auto Value:-
You can set the margin assets to the vehicle to horizontally middle the detail inside its container.
The element will then take up the required width, and the ultimate area will be broken up equally between the left and right margins.
<!DOCTYPE html>
<html>
<head>
<style>
div {margin: auto;
width: 300;
border: 2px solid red;
}
</style>
</head>
<body>
<h1> Auto Margin Used </h1>
<p> You can set the margin property to the car horizontally middle of the detail inside its box. The detail will then take in the required width, and the remaining area will be split equally among the left and proper margins:<p>
<div> This paragraph will be horizontally centered because it has the auto margin.</div>
</body>
</html>
Try this code for a better experience
The Inherit Value:-
This instance lets the left margin of the <p class="ex1"> element be inherited from the determine detail (<div>):
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 2px solid red;
margin-left: 100px;
}
p. one{margin-left: inherit;
}
</style>
</head>
<body>
<h1> Use Of Inherit Value </h1>
<p> Let the left margin be inherited from the parent element. </p>
<div>
<p class="one"> The paragraph has an inherited left margin from the parent element.</p>
</div>
</body>
</html>
Try this code for a better experience
All CSS Margin Properties:-
- margin - A shorthand property for setting all the margin properties in one declaration.
- margin top - Set the top margin of an element.
- margin right - Set the right margin of an element.
- margin bottom - Set the bottom margin of an element.
- margin left - Set the left margin of an element.
0 Comments