Padding Versus Margins in CSS Design
Wednesday, April 7th, 2010
Do you know the different between padding and margins in CSS web site design? That was the very interesting question posed to me via e-mail by one of the great Lunarpages web hosting customers, yesterday.
I have trouble telling the difference between what padding is in CSS code and what the margin is, when I set both around a div or class. Could you explain? Thanks!
The quickest rule of thumb I can share to tell the margin and the padding apart is very simple.
The margin is always the space outside of the element you are working with, and padding is always inside the element you are working with.
What is Padding?
The padding in CSS terms is there to clear a space around the inside of an element. Think of it as having a house filled with chairs. You then move all the chairs to the middle of the house, to make more room to move around the outside of the general “chair space”. This empty space would be your proverbial padding.
Example Padding Use:
padding-top:10px;
padding-bottom:15px;
padding-right:10px
padding-left:15px;
What is Margin?
The margin in CSS terms is defined as the space outside the element. Looking at the house metaphor again, you could think of the margin as the empty space all the way around your house.
Example Margin Use:
margin-top:20px;
margin-bottom:20px;
margin-right:20px;
margin-left:20px;
So, I hope this helps our confused reader and Lunarpages web hosting customer on the differences between the two and helps all of you too. If you would like to see more CSS tutorials, tips and more be sure to leave me a comment!
© Lunarpages Web Hosting – Also, don’t forget to follow @lunarpages on Twitter!
Original post by Mitch
