View video tutorial

CSS Padding Shorthand

CSS

❮ Prev Next ❯

We use the shorthand property to shorten the code.

The following properties are used in shorthand padding.

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

.p1 {
  padding: 20px 40px 60px 80px;
}

Try it Now »

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

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

.p1 {
  padding: 20px 40px 60px;
}

Try it Now »

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

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

.p1 {
  padding: 20px 40px;
}

Try it Now »

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

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

.p1 {
  padding: 20px;
}

Try it Now »

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

❮ Prev Next ❯