CSS Margin
There are many margin properties in CSS by which you can set space around an element. This space can be specified in terms of units of pixel or centimeters or in terms of persentage. Negative values are also allowed. We will discuss these properties here.Set top margin of an element
By using the margin-top property, the top margin of an element can be set. Example:Output:<html> <head> <style type="text/css"> p.top {margin-top: 1cm} </style> </head> <body> <p class="top">This paragraph has top margin of 1 cm</p> </body> </html>
This paragraph has top margin of 1 cm
Set right margin of an element
The right margin of an element can be set by using margin-right property.Example:
Output:<html> <head> <style type="text/css"> p.simple {text-align: right} p.right {text-align: right; margin-right: 3cm} </style> </head> <body> <p class="simple">This is simple paragraph</p> <p class="right">This paragraph has right margin of 3 cm</p> </body> </html>
This is simple paragraph
This paragraph has right margin of 3 cm
Set bottom margin of an element
margin-bottom property sets the bottom margin of an element.Example:
Output:<html> <head> <style type="text/css"> p.bottom {margin-bottom: 2cm} </style> </head> <body> <p class="bottom">This paragraph has bottom margin of 2 cm</p> </body> </html>
This paragraph has bottom margin of 2 cm
Set left margin of an element
By using margin-left property, left margin of the element can be set.Example:
Output:<html> <head> <style type="text/css"> p.left {margin-left: 2cm} p.neg {margin-left: -3cm} </style> </head> <body> <p class="left">This paragraph has left margin of 2 cm</p> <p class="neg">This paragraph has negative left margin</p> </body> </html>
This paragraph has left margin of 2 cm
This paragraph has negative left margin
Set all four margins in a single command
By using margin property all the four margins can be set in a single command. Let's see how..!!Example:
Output:<html> <head> <style type="text/css"> p.one {margin: 10px} p.two {margin: 10px 2%} p.three {margin: 10px 2% -10px} p.four {margin: 10px 2% -10px auto} </style> </head> <body> <p class="one">all four margins will be 10px</p> <p class="two">top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.</p> <p class="three">top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px</p> <p class="four">top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser</p> </body> </html>
all four margins will be 10px
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser