Common classes for margin and padding?

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.

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. 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. 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.

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.

In my opinion, this is not optimal, unless you do it right. In your markup, you now have something like this: 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: because that way, at least you can do: div.

ContactErrorMessage { color: red }.

Thanks every one for your responses. Really appreciate it :) – Mahima Feb 22 at 10:49.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.