CSS margin
In CSS we are also having the properties of spacing around elements , outside from defined borders
bu using the margin property. And these properties we can set to the following sides:-
- margin-top
- margin-right
- margin-bottom
- margin-left
Values we can implement here in margin properties:-
- auto: the browser itself calculates the margin.
- inherit: here margin been inherit from it's parent element.
- %: margin we can specify in form of %.
- length :specify length(in pt px cm etc.)
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:20%;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
Margin (shorthand)
This allows you to take the spacing from top, right, bottom and left in the webpage .
Order of writing margin shorthand property
- margin-top
- margin-right
- margin-bottom
- margin-left
And the same above order we have to follow if we want to use margin shorthand property, we can also omit the properties if we
want but the order than also remains same .
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
.red{
margin: 10px 20px 15px 20%;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p class="red"> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the margin-top, margin-right, margin-bottom and margin-left by specifying these
properties in single line.
Let's talk about all margin-properties
| Property | Description |
| margin | A shorthand property for setting the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |
