View video tutorial

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-top
  • margin-right
  • margin-bottom
  • margin-left

margin: 20px 40px 60px 80px;

Here, top:20px. right:40px. bottom:60px. left:80px.

Example

.p1 {
  margin: 20px 40px 60px 80px;
  border: 1px solid black;
}
Try it Now »

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.

Example

.p1 {
  margin: 20px 40px 60px;
  border: 1px solid black;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


margin: 20px 40px;

Here, top:20px. right:40px. bottom:20px. left:40px.

Example

.p1 {
  margin: 20px 40px;
  border: 1px solid black;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


margin: 20px;

Here, top:20px. right:20px. bottom:20px. left:20px.

Example

.p1 {
  margin: 20px;
  border: 1px solid black;
}
Try it Now »

Click on the "Try it Now" button to see how it works.