CSS margins and paddings are those CSS properties which deal with the spacing in and around the element. CSS margins create spaces around the HTML elements while CSS paddings create spaces inside the HTML elements.
CSS margin properties are used to create space around HTML elements outside their outer edge. You can set the margin for each side of an element (top, right, bottom and left) using individual properties.
The margin properties can have any of the following values. Negative values are also supported by CSS margins.
| Value | Description |
|---|---|
| auto | the browser calculates the margin and positions the HTML element in the center horizontally |
| length (px, pt, cm, etc) | specifies a margin in exact value |
| % | specifies a margin in % of the width of the containing element |
| inherit | specifies the margin should be inherited from parent element's margin value |
p {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 15px;
margin-left: 15px;
}
All the margin values can be specified in one margin property which can have any number of values from one to four.
If it has four values, the values will be assigned as the first value for margin-top, second value for margin-right, third value for margin-bottom and the fourth value for margin-left. To make it easier to remember, the values are assigned from the top in a clockwise direction to all sides.
If it has three values, the values will be assigned as the first value for margin-top, second value for margin-right and margin-left and the third value for margin bottom.
If CSS margin property has two values, the first value will be assigned to margin-top and margin-bottom while the second value is assigned for margin-right and margin-left.
If it has a single value, then, each sides are assigned the same value.
p{
margin: 25px 50px 75px 100px;
}
When two HTML elements are placed together in an HTML page where the first element has defined margin-bottom and the latter one has defined margin-top values, browsers collapse those two into one margin value whichever is the highest. This is termed as margin collapse.
<h3>Hello</h3>
<h4>World</h4>
<style>
h3{
margin-bottom: 50px;
}
h4{
margin-top: 70px;
}
</style>
The spacing between these two element will not be 120 pixels but will be 70 pixels due to margin collapse.
CSS padding properties are used to create spaces around HTML elements inside their outer edge. Identical to CSS margins, you can set the padding for each side of an element (top, right, bottom and left) using individual properties.
The padding properties can have any of the following values. Negative values are not supported by CSS padding property.
| Value | Description |
|---|---|
| length (px, pt, cm, etc) | specifies a padding in exact value |
| % | specifies a padding in % of the width of the containing element |
| inherit | specifies the padding should be inherited from parent element's margin value |
p {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 15px;
margin-left: 15px;
}
All the padding values can be specified in one padding property which can have any number of values from one to four.
If it has four values, the values will be assigned as the first value for padding-top, second value for padding-right, third value for padding-bottom and the fourth value for padding-left. To make it easier to remember, the values are assigned from the top in a clockwise direction to all sides.
If it has three values, the values will be assigned as the first value for padding-top, second value for padding-right and padding-left and the third value for padding bottom.
If CSS padding property has two values, the first value will be assigned to padding-top and padding-bottom while the second value is assigned for padding-right and padding-left.
If it has a single value, then, each sides are assigned the same value.
p{
padding: 25px 50px 75px 100px;
}
Leave a comment