CSS Margin Shorthand
CSS
The margin shorthand property is used to specify all margin properties on one line.
CSS margin Shorthand
➔ The following properties are used in margin shorthand.
margin-topmargin-rightmargin-bottommargin-left
CSS margin property
➔ The CSS margin shorthand property is used to specify the space outside the borders of an element.
➔ This creates a buffer space outside the borders of an element.
Syntax
margin: length | auto | initial | inherit;
Property values
| Common Value | Description |
|---|---|
| length | CSS specifies a specific margin using units of length (e.g., px, em, rem, cm). 0 is the default value. |
| percentage | Specifies the margin as a percentage of the width of the containing block. |
| auto | The browser calculates the margin automatically. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example (shorthand)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS margin shorthand Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
.div0 {
border: 1px solid red;
display: inline-block;
margin: 5px;
}
.div1 {
border: 1px solid blue;
display: block;
margin: 10px;
}
.div2 {
border: 1px solid green;
display: block;
margin: 40px;
}
img {
border: 1px solid black;
display: block;
margin: 40px;
}
</style>
</head>
<body>
<h3>CSS margin shorthand Example</h3>
<hr>
<p>The margin property specifies the space outside the borders of an element.</p>
<p>Note: Here the blue element uses a margin of 10 pixels, the green element and the img element use a margin of 40 pixels from their border.</p>
<div class="div0">
<div class="div1">
<div class="div2">
<img src="resources/images/fruits-strawberry.png" width="100">
</div>
</div>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
margin: 20px 40px 60px 80px;
Here,top:20px.
right:40px.
bottom:60px.
left:80px.
top, right, bottom, left all are specified.
Click on the "Try it Now" button to see how it works.
margin: 20px 40px 60px;
Here,top:20px.
right:40px.
bottom:60px.
left:40px.
top, right, bottom are specified. so left value is copied from right value.
Click on the "Try it Now" button to see how it works.
margin: 20px 40px;
Here,top:20px.
right:40px.
bottom:20px.
left:40px.
top, right are specified. so bottom value is copied from top value and left value is copied from right value.
Click on the "Try it Now" button to see how it works.
margin: 20px;
Here,top:20px.
right:20px.
bottom:20px.
left:20px.
top is specified. so left, right, bottom values are copied from top value.
Click on the "Try it Now" button to see how it works.