DESCRIPTION
Margins are used to create space around elements, outside of any defined borders. Unlike Padding , In Margins it is possible to set negative values to overlap the content. Values of margins aren’t inherited by child element.
Margin properties can have the following values –
- auto – the browser calculates the margin
- length – specifies a margin in px, pt, cm, etc.
- % – specifies a margin in % of the width of the containing element
- inherit – specifies that the margin should be inherited from the parent element
Simple Example of margins –
<html> <head> </head> <body> <p style="margin: 15px; border:1px solid black;"> All sides have 15px margin. </p> <p style="margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p> </body> </html>
This Code will produce the following result on your webpage –
NOTE – Margins create extra space around an element. In contrast, padding creates extra space within an element.
Syntax
To Apply margin to all four sides
margin: 1em;
For vertical | horizontal
margin: 5% 10%;
For top | horizontal | bottom
margin: 1em 2em 2em;
For top | right | bottom | left
margin: 5px 1em 0 2em;
Margins Shorthand Properties
CSS allows you to set margin for each side individually .
- margin-bottom specifies the bottom margin of an element.
- margin-top specifies the top margin of an element.
- margin-left specifies the left margin of an element.
- margin-right specifies the right margin of an element.
EXAMPLES –
1. Margin-bottom
<html> <head> </head> <body> <p style="margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin </p> <p style="margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p> </body> </html>
This Code will produce the following result on your webpage –
2. Margin-top
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This paragraph has 15px top margin.
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This paragraph has top margin equal to 5% of the containing element.
</p>
</body>
</html>
This Code will produce the following result on your webpage –
3. Margin-left
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This paragraph has 15px left margin.
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This paragraph has left margin equal to 5% of the containing element.
</p>
</body>
</html>
This Code will produce the following result on your webpage –
4. Margin-right
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This paragraph has 15px right margin.
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This paragraph has right margin equal to 5% of the containing element.
</p>
</body>
</html>
This Code will produce the following result on your webpage –
Next topic – Borders in CSS
Previous topic – Paddings in CSS