Padding and Margin

In this post I will explain padding and margin and their purpose.

First I will explain the difference between the two.

Padding is like a inside spacing where margin is a outside spacing. Both work in the same way with about the same effect.


Now the values of them can be used differently.

You can have one of the several
in
px
em
pt
%

Now their are may ways to get the same effect with padding and margin

You can specify which side like this

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Now you can also use padding in one line by doing something like this. All 3 of these below will give you the same effect as the code above.

padding: 25px 50px; ( 2 digit)

padding 25px 50px 25px 50px (4 digit)

padding 25px 50px 25px (3 digit)



With 2 digit padding or margin the first digit is top and bottom where the second is left and right.

With 4 digit padding or margin it works like a clock. top, right, bottom, and left.

With 3 digit it padding or margin the first digit is top, the second is left and right and the third is bottom.