How do I write my css classes with div tags?
Posted by jerothe in 
I am constantly looking for css shorthands when it comes to writing my stylesheets. I tend to try to plan to make my stylesheets formatted with the best logical sense, portability across a site, and in a condensed, concise manner. Because I layout my website in CSS, doesn’t mean I design them any less complex, and that is why I believe that my style sheets push the range of 10-12 kb. The ideal size would actually be somewhere between 7-8 kb. With that in mind, that is why I like techniques like this all the more.
I read about this before, but didn’t really grasp it. To review, the Margin property. There is;
- margin-top
- margin-right
- margin-bottom
- margin-left
Instead of writing out each of these margin properties individually, we can give them a shorthand like so;
margin: 10px 0 0 0;
Notice, I don’t give 0 a measurement because 0 is still 0 no matter what measurement you use. A little shorthand trick. But, each of those measurements
listed goes in the following order; margin: (top) (right) (bottom) (left)
Let’s make our Margin shorthand even smaller.
To rewrite our example above;
margin: 10px 0 0 0;
I can actually condense the (left) and (right) margin because they are the same measurement. Our margin property would now look like this;
margin: 10px 0 0;
What the directly above example says is, margin-top = 10px, margin-left and margin-right = 0, and margin-bottom = 0. That is the order. This shorthand is specifically for instances when you have a different margin-top and margin-bottom property.
