CSS offers the ability to shorten your code in a few instances to make it more tidy and easy to maintain. Here’s an example of how to shorten your margin and padding rules.

This rule:

.mydiv {
padding-top: 12px;
padding-right: 3px;
padding-bottom: 6px;
padding-left: 9px;
}

Is exactly the same as this rule using shorthand:

.mydiv {
padding: 12px 3px 6px 9px;
}

Notice two things: First, there is no punctuation delimiter between the values just a space. Second, the order you place the values matters. Imagine a clock, starting at the top (12:00) is your first value followed by 3:00, 6:00 and 9:00. Each of these positions are how you determine where the padding/margin gets applied.

CSS clock
CSS clock outline