Common classes for margin and padding

Question

I have declared common css classes for common margin and padding classes in my css so that i can use them without making other css declarations too specific.

For example :

.padTB5{padding:5px 0;} 
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;} 
.mTop5{margin:5px 0 0;}

1. Is this method right??
2. If not then why?
3. If yes then which is better margin or padding? (I know margin issues with browsers)

Please guide... thanks in advance :)

Answer 1

1. This is bad practice as classes should be semantic - that is they should describe the type of thing you are styling. For example "blog-header", "primary-this", "secondary-that" etc.

2. In practice, the downside to using classes as you describe is that if your visual design changes and you need different sized margins or padding, then you will need to change the class names too - which means changes to both the CSS and HTML. Or if you just change the CSS then the class names no longer describe what they're for. This approach is not much better than using inline styles.

3. Margins and padding are different things and behave in different ways. Margins can collapse in certain circumstances whereas padding doesn't. Padding will include background images or colours whereas margin doesn't. Borders will display between padding and margin.