Just another WordPress site
28 May
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.


Leave a reply