CSS Padding
The CSS padding element is used to place spacing inside an element. Typically used to set the content away from the edges of a div. There are several different ways you can set the padding value.
- Percentages - %
- Centimeters - cm
- Pixels - px
The four sides can be specified independently. Unlike the CSS margin where you have the ability to use a negative value you cannot use a negative value with CSS padding.
The CSS padding properties;
- padding-top:5px;
- padding-right:5px;
- padding-bottom:5px;
- padding-left:5px;
CSS Padding Shortcuts
With the above, the four sides of padding are set to be 5 pixels each. This can be shortened down to
margin:5px;
Simple enough. Now say you want to have the top and bottom padding set to 5px and the two sides set at 20px. You don't have to use the longer version.
Shorthand your settings;
margin:5px 20px;
The first decaration sets the top and bottom, the second declaration sets the two sides.
Additional shorthand for the CSS margin
You can control the four sides independantly in a single padding declaration by simply adding the additional declarations.
padding:5px 10px 15px 20px;
The padding is controlled in a clockwise direction starting with the top.
- The top is set at 5px
- The right is set at 10px
- The bottom is set at 15px
- The left is set at 20px
Use the editor to play around with different padding values. I have started it out with the second pargraph having all four sides set at 20px.