Margins & Padding

If your coming form an HTML background you’ll have an idea of how margins and padding work in CSS.

Margins define the distance between a property and everything around it.

Padding defines the distance between a property and the content within it.

Margins

You can define margins by pixel length or percentage. You have the option to define all margins as the same length, the oppposing margins as the same length or individually define top, right, bottom and top.

So if you wanted to define a margin of 10 pixels all around the element you would use :

margin : 10px;

As i mentioned before, you can define each margin individually. The order goes Top, Right, Bottom and then Left. So if you wanted a top margin of 10 pixels, right margin of 5 pixels, bottom margin of 15 pixels and left margin of 3 pixels you would use :

Margin : 10px 5px 15px 3px;

Note here that there is no period or comma seperating the values.

You also have the option to define the margin sides individually. For the above example you would use :

margin-top: 10px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 3px;


Using the above obviously means a tiny bit more code however if you get mixed up with the order of the margins it might help you. I remember the order by thinking of a clock - ie. the clock starts at the top and then goes clockwise.

If you define a margin and miss out a side then the margin will have the same size as the side opposite it.

margin : 20px 5px;

The above code defines the top margin as 20 pixels and the right margin as 5 pixels. Since the bottom and left sides aren’t defined, their size is defined by the side opposite them. Therefore the bottom side would be 20 pixels and the left hand side would be 5 pixels.

This is also the same if 3 sides are defined.

margin : 20px 5px 10px;

The above code would define the left hand margin as 5 pixels since thats what the right hand side has been defined as.

Padding

Padding works exactly the same way as margins. All of the above rules are applicable to padding. The easiest way to remember the difference is that margins define the space outside an element and padding defines the space inside and element.

Here are some examples of what padding would look like in a css document.

padding : 10px;

padding : 10px 5px 10px 40px;

padding-top: 10%;
padding-right: 20%;
padding-bottom: 30%;
padding-left: 10%;

Summary

Once you get used to how margins and padding works, you can really start to change things around in your blog and get the information displayed the way you want it. I hope this post has helped. As usual, if your unsure about anything please leave a comment and ill do my best to help/clarify for you.

If you wanna read more about margins please read my next post on ‘How to use Margins to get the shape of your blog theme‘.

Thanks,
Kevin