Margin and Padding Controls
Margins are the space outside of the border around the object while padding is the space between the contents and the border. There are a couple of different ways to set them.
- margin-top specifies the size of the top margin. It can be a length or percentage. The default is auto.
- margin-right specifies the size of the right margin. It can be a length or percentage. The default is auto.
- margin-bottom specifies the size of the bottom margin. It can be a length or percentage. The default is auto.
- margin-left specifies the size of the left margin. It can be a length or percentage. The default is auto.
As an alternative to the above you can specify margin instead followed by one - four lengths or percentages. If one is specified it applies to all four margins. If two are specified they refer to top/bottom and left/right margins respectively. If three are specified they refer to top, left/right, and bottom respectively. If four are specified they apply to top, right, bottom, and left respectively.
- padding-top specifies the size of the top padding. It can be a length or percentage. The default is 0.
- padding-right specifies the size of the right padding. It can be a length or percentage. The default is 0.
- padding-bottom specifies the size of the bottom padding. It can be a length or percentage. The default is 0.
- padding-left specifies the size of the left padding. It can be a length or percentage. The default is 0.
As an alternative to the above you can specify padding instead followed by one - four lengths or percentages. They are applied the same way as the corresponding number of padding entries.
Length can be specified in a number of different ways:
- em width of letter M in current font
- ex width of letter x in current font
- cm centimetres
- mm millimetres
- pc picas
- pt points
- in inches
- px pixels
Examples
p{margin:10px;padding:5px;}
span.bt {padding:5px 10px;}
