| |
| Overview |
| |
In this chapter you will learn:
- Definition of margin and padding
- Setting margin around an element and its corresponding individual edges
- Difference between padding and margin
- Setting padding around each edge of an element
|
This chapter elucidates the concept of margins and paddings. A margin is a space on the outside of the element, whereas padding is the space inside the element.
Margin
CSS allows any element to have a margin.
-
A margin is the space between an element and the elements to its top, left, bottom and right. CSS margin properties let you define the space around elements.
-
Possible values for margin properties are length, percentage and auto.
length - It defines a fixed margin.
percentage - It defines margin in percentage with respect to the parent element's width.
auto- With this value, the browser sets a margin.
-
Negative values are permitted, to overlap content.
-
The default value for margin is zero.
A shorthand margin property can be used to change all the margins at once. Also, the margin property can be used to set a different value for each edge of the element. For this purpose, more than one value for the property is to be used. These are discussed below.
- One margin value specifies the same margin for every edge.
| Example |
h1{margin : 5 px;},
In this, all four margins will be 5 pixels. |
| |
| Example |
p { margin : 5px 15 cm;}
In this, the top and bottom margins will be 5 pixels, left and right margin will be 15 cm . |
| |
| |
-
If three margin values are specified, the first value specifies the color of the top edge, the second value is set for the left and right edges, and the third value for the bottom edge.
| Example |
p { margin : 5 px 10% -5px;}
In this, the top margin will be 5 pixels, left and right margins will be 10% of the total width of the document, and the bottom margin will be -5 pixels. |
| |
-
With four margin values, the four margin values specify the margin of the top, left, bottom and right respectively.
| Example |
h1 { margin : 10 px 5% -15px auto;}
In this, the top margin will be 10 pixel, right margin will be 5% of the total width of the document, bottom margin will be -15 pixel, and the left margin will be set by the browser. |
| |
-
CSS margin properties can also be explicitly defined corresponding to each edge. Separate properties can be set for top, bottom, left, right margins. These are given below:
Margin-Bottom
This property sets the bottom margin of an element.
| Example |
p { margin-bottom : 20px;}
Margin specifies one or more exterior gutters of an element. In this example, bottom margin is 50 pixels. |
| |
Margin-Top
This property sets the top margin of an element.
| Example |
p { margin-top : -30px;}
In this example, top margin is 30 pixels. |
| |
Margin-Left
This property sets the left margin of an element.
| Example |
p { margin-left : 20%;}
In this example, left margin is 20% of the total width of the document. |
| |
Margin-Right
This property sets the right margin of an element.
| Example |
p { margin-right : 50%;}
In this example, right-margin is 50% of the total width of the document. |
| |
| |
|
