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.

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.

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:

Examples

p{margin:10px;padding:5px;}
span.bt {padding:5px 10px;}

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate