Margin
In order to provide space around objects outside of any clearly defined borders, margins are used.
CSS Margins
Beyond any specified borders, space is created around items using the CSS margin attributes.
You have complete control over the margins when using CSS. The top, right, bottom, and left margins of an element can all be set using attributes.
Margin - Individual Sides
To specify the margin on each side of an element, use the properties provided by CSS:
- margin-right
- margin-top
- margin-left
- margin-bottom
The following values can be assigned to any of the margin properties:
- 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
Advice: Negative numbers are OK.
Example
Set different margins for all four sides of a <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand Property
It is possible to specify all of the margin properties in a single property, which will shorten the code.
The following specific margin attributes are together referred to as the “margin property”:
- margin-bottom
- margin-left
- margin-top
- margin-right
Thus, this is how it functions:
If there are four values in the margin property:
margin: 25 pixels, 50 pixels, 75 pixels, 100 pixels; top, left, and right margins are 25 pixels, 50 pixels, and 75 pixels, respectively.
Example
Use the margin shorthand property with four values:
p {
margin: 25px 50px 75px 100px;
}
If there are three values in the margin property:
- margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
Example
Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
Should the margin attribute possess two values:
- margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
Example
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
When the value of the margin attribute is one:
each of the four margins is 25 pixels.
Example
Use the margin shorthand property with three values:
p {
margin: 25px;
}
The auto Value
To center an element horizontally within its container, you can set the margin property to auto.
The element will then occupy the designated width, with the left and right margins sharing the remaining space equally.
Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
In this case, the parent element (<div>) determines the left margin of the <p class=”ex1″> element:
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
All CSS Margin Properties
| Property | Description |
|---|---|
| margin | A shorthand property for setting all the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |
