Padding is inner space.
Margin is outer space.
Take a look at the image above, from outside to inside: margin, border, padding and the content. You may notice that the padding was affected by the background color, while maggin is not. That’s the difference between inner and outer. So padding is used for design, making some private room for the element, for example, and maggin is always used as white space to saperate elements.
One more thing to be mentioned, padding adds to the width or height of the element, which means it expends the final width or height. For example, you had an element which was 100px wide and 50px high, and then you set all paddings of the element to 10px. You will end up with 120px of width and 70px of height.
Width: 100px + 10px(Left padding) + 10px(Right padding) = 120px
Height: 50px + 10px(Top padding) + 10px(Bottom padding) = 70px
for more references:
- Mastering CSS Code: Getting Started
- Margins and Padding
- The Definitive Guide to Using Negative Margins
- CSS Margin
- CSS Padding
Feel free to visit our Forum, subscribe our RRS Feed for news updates, and follow us on Twitter.
