How to Specify Padding and Margin in Blogger

Tweet

 

In this short post I am going explain padding and margin and their purpose.

First I am going to explain the difference between the two.

Simply put, padding is the spacing from the inside while margin means the spacing from the outside. Both work by the same principles and to about the same effect.

You can find and use different values to specify the spacing:

in
px
em
pt
%

There are many ways to get the same effect with padding and margin.

You can specify the distance from the border of each side like this:

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

You can also use padding in one line by writing something like this.(All 3 options below will give you the same effect as the code above.)

padding: 25px 50px; (2 digits)

padding 25px 50px 25px 50px (4 digits)

padding 25px 50px 25px (3 digits)

If you use 2 digits for padding or margin then the first digit is top and bottom while the second is left and right.

If you use 4 digits for padding or margin then it goes clockwise: top, right, bottom, and left.

If you use 3 digits for padding or margin, then the first digit is top, the second is left and right and the third is bottom.

That´s all!

Good luck!