Rizq Technology – Exploring Your iDea.

There have been a number of occasions when looking over other developers CSS I notice bits of code similar to the following…

#div {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-color: #666666;
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
}

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or % )
}

#div {
margin:0 5px 10px 15px;
(top right bottom left)
}

and

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}

#div {
margin:10px 20px 0;
(top right/left bottom)
}

and

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
(top/bottom left/right)
}

and

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}

#div {
margin:50px;
(top/right/bottom/left)
}

• Follow us on Twitter, or subscribe to the rizqtech RSS Feed for more daily web development and articles.

Enjoy this Post!