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>
Advertisements
To Continue Learning Please Login
Login with Google