CSS - margin

The shorthand notation means that code can be shortened by passing the margin values at once.

All the four values can be passed at a go or in a combination of one, two or three values at a time.

The rules for shorthand notation of margins for one, two, three and four value declarations are as follows:

Number of value(s)	Order
one	the same margin is applied to all the four sides
two	the first margin applies to the top and bottom, the second to the left and right
three	the first margin applies to the top, the second to the left and right, the third to the bottom
four	the margins apply to the top, right, bottom, and left in that order

CSS Margin - Basic Example

Following example demonstrates the use of shorthand notation−

<html>
<head>
</head>
<body>
    <h3>margin-shorthand properties</h3>
    <div>
        <p style="margin: 50px; border: 1px solid #0b0b0b;">This element has same margin on all the sides - 50px.</p>
        <p style="margin: 50px 10%; border: 1px solid #0b0b0b;">This element has top and bottom margins as 50px and right and left margins as 10%.</p>
        <p style="margin: 25px 40px 50px; border: 1px solid #0b0b0b;">This element has a top margin as 25px, left and right as 40px and bottom margin as 50px</p>
        <p style="margin: 10px 20px 30px 40px; border: 1px solid #0b0b0b;">This element has a top margin as 10px, left as 20px, right as 30px and bottom margin as 40px</p>
    </div>
</body>
</html>