Different styles for padding and margins.

 Add Different Padding to Each Side of an Element

Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides.

CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, padding-left, properties.

Instead of specifying an element's padding-top, padding-right, padding-bottom, padding-left, properties individually, you can specify them all in one line, like this:

padding: 10px 20px 10px 20px;

These four values work like a clock: top, right, bottom, left and will produce the exact same result as using the side-specific padding instructions.

Add Different Margins to Each Side of an Element

Sometimes you will want to customize an element so that it has a different margin on each of its sides.

CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, margin-left properties.

Let's try this again but with the margin this time.

Instead of specifying an element's  margin-top, margin-right, margin-bottom, margin-left properties individually, you can specify them all in one line, like this:

margin: 10px 20px 10px 20px;

These four values work like a clock: top, right, bottom, left and will produce the exact same result as using the side-specific margin instructions.