Margin and Padding
Margins and padding are used to adjust the position of an element and to create space around it.
Padding
Padding is the space between an element’s content and its border. We can specify the paddings for the individual sides of an element such as top, right, bottom, and left sides using the CSS padding-top, padding-right, padding-bottom, and the padding-left properties, respectively.
Example: Try It
h1 {
padding-top: 50px;
padding-bottom: 100px;
}
The Padding Shorthand Property
The padding property is a shorthand property to avoid setting padding of each side separately, i.e., padding-top, padding-right, padding-bottom and padding-left.
Let's take a look at the following example to understand how it basically works:
Example: Try It
h1 {
padding: 50px; /* apply to all four sides */
}
h1 {
padding: 25px 75px; /* vertical | horizontal */
}
h1 {
padding: 25px 50px 75px; /* top | horizontal | bottom */
}
h1 {
padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}
This shorthand notation can take one, two, three, or four whitespace separated values.
- If one value is specified, it is applied to all four sides.
- If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element's box.
- If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
- If four values are specified, they are applied to the top, right, bottom and the left side of the element's box respectively in the specified order.
It is recommended to use the shorthand properties, it will help you to save some time by avoiding the extra typing and make your CSS code easier to follow and maintain.
Margin
The margin is the space around an element’s border and is set using the margin properties. We can specify the margins for the individual sides of an element such as top, right, bottom, and left sides using the CSS margin-top, margin-right, margin-bottom, and the margin-left properties, respectively.
Example: Try It
h1 {
margin-top: 50px;
margin-bottom: 100px;
}
The Margin Shorthand Property
The margin property is a shorthand property to avoid setting margin of each side separately, i.e., margin-top, margin-right, margin-bottom and margin-left.
Let's take a look at the following example to understand how it basically works:
Example: Try It
h1 {
margin: 50px; /* apply to all four sides */
}
h1 {
margin: 25px 75px; /* vertical | horizontal */
}
h1 {
margin: 25px 50px 75px; /* top | horizontal | bottom */
}
h1 {
margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}
This shorthand notation can take one, two, three, or four whitespace separated values.
- If one value is specified, it is applied to all four sides.
- If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element's box.
- If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
- If four values are specified, they are applied to the top, right, bottom and the left side of the element's box respectively in the specified order.
It is recommended to use the shorthand properties, it will help you to save some time by avoiding the extra typing and make your CSS code easier to follow and maintain.