All the margin properties can have the following values:
Tip: Negative values are allowed.
Example
Set different margins for all four sides of a <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
So, here is how it works:
If the margin property has four values:
Example
Use the margin shorthand property with four values:
p {
margin: 25px 50px 75px 100px;
}
If the margin property has three values:
Example
Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
If the margin property has two values:
Example
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
If the margin property has one value:
Example
Use the margin shorthand property with one value:
p {
margin: 25px;
}
Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
- margin-left: inherit;
}
All CSS Margin Properties
Look at the following example:
Example
Demonstration of margin collapse:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|