HTML Dog
Skip to navigation

Shorthand Properties

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

Margins and Padding

margin allows you to amalgamate margin-top, margin-right, margin-bottom, and margin-left in the form of property: top right bottom left;

So:


p {
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Can be summed up as:


p {
    margin: 1px 5px 10px 20px;
}

padding can be used in exactly the same way.

By stating just two values (such as padding: 1em 10em;), the first value will be the top and bottom and the second value will be the right and left.

Borders

border-width can be used in the same way as margin and padding, too. You can also combine border-width, border-color, and border-style with the border property. So:


p {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

Can be simplified to be:


p {
    border: 1px red solid;
}

Fonts

Font-related properties can also be gathered together with the font property:


p {
    font: italic bold 12px/2 courier;
}

This combines font-style, font-weight, font-size, line-height, and font-family.

So, to put it all together, try this code:


p {
    font: 14px/1.5 "Times New Roman", times, serif;
    padding: 30px 10px;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 10px 50px;
}

Lovely.