HTML CSS Margins
Margins define the area surrounding an element, outside of the border. The margin element has a property of 80 px (80 pixels)
-
margin-top: length "0px" (px, pt, cm, etc. Default value is 0) percentage (Specifies a margin in percent of the width of the containing element) or auto (The browser determines the margin), inherit (Specifies that the value is inherited from the parent element) ;
-
margin-left: length, percentage, or auto, inherit;
-
margin-right: length, percentage, or auto, inherit;
-
margin-bottom: length, percentage, or auto, inherit ;
You can set all 4 margins with one statement. Ex: p { margin: 10px; }
This sets all of the margins in the paragraph to 10 pixels.
-
margin:5px 10px 50% 15px;
top margin is 5 pixels
right margin is 10 pixels
bottom margin is 50 percemt
left margin is 15 pixels
-
margin: 50% 10px 15px;
top margin is 50 percent
right and left margins are 10 pixels
bottom margin is 15 pixels
-
margin:5px 15px;
top and bottom margins are 5 pixels
right and left margins are 15 pixels
-
margin:10px;
all four margins are 10 pixels
Negative values are allowed also and the default values are set to 0.
Example:
.myMargin {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50%;
margin-left: 50%;
}
p.myMargin {
margin: inherit;
}
This code will create a class called "myMargin" with a 50 pixel top margin, a 50 pixel bottom margin, 50% right margin and a 50% left margin. The paragraph will inherit the selector from the parent class.
Another Example
p {
margin: 50% ;
}
This will set all 4 margins in the paragraph to 50 percent.
I hope you will join us for the next lesson Lesson 8) Padding
Additional Resources