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.

Answer 2

You shouldn't do that. Naming classes like left or margintop20 is unadvised. You should use classes like content or sidebarBox, that describe the content.

Let's say you want to change the margin-top from 10px to 1em. Using your method either

• mTop10 will have margin-top: 10px;
• or you have to change your className to mTop1em

None of this is good.

See w3.org goodclassnames about this.

Also see w3.org about box model for margin, padding.

Answer 3

Margin is different then padding. Margin is the space out side the box, padding is the space inside the box. Both margin and padding are cross browser compatible. Your declarations are correct although it is not a recommended practice to create classes for margins or padding. One good use to this is creating a class for rounded corners or shadows, where you can quickly apply round corners by specifying the round corner class.

Answer 4

In my opinion, this is not optimal, unless you do it right.

In your markup, you now have something like this:

<div class="pad10 mTop10">

and you have that all over your site.

What if you want to change your CSS to have a little extra margin/padding?

.pad10 { padding: 12px }
.mTop10 { margin: 12px 0 0 } 

Oh. Those class names aren't looking so sensible anymore: you have to either put up with wrongly named selectors, or go Find and Replace in all your files.

What if you decide that some elements with .pad10 need to have red text?

.pad10 { padding: 12px; color: red }

Now the class name makes even less sense.

It might be alright to do this type of thing if you also apply a relevant (semantically sensical) class/id to each element in your HTML:

<div class="contactErrorMessage pad10 mTop10">

because that way, at least you can do:

div.contactErrorMessage { color: red }