Simian Design

July 14, 2004

Daily Tip: CSS Shorthand

Okay, I'm going to try and post a new tip and/or trick every day. That's a new goal. We'll see how long it takes for this to break.

Today's tip: CSS Shorthand. We know about the "clock". What that means that the following two declarations are the same thing.

margin: 5px 10px 15px 20px;

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;.

Top, Right, Bottom, Left is how the "clock" reads.

Now you can also use the following: (shorthand first, then long-hand)

margin: 5px 10px;

margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;

Top/Bottom, Sides. That's the Shortest-hand version.

There is still one more type of shorthand you can see.

margin: 5px 10px 15px;

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;

Top, Sides, Bottom. That's the Middle Shorthand.

Okay, so in review:
Single Value = All Sides.
Two Values = Top/Bottom, Sides.
Three Values = Top, Sides, Bottom.
Four Values = Top, Right, Bottom, Left.

This is applicable to border, margin, padding,

Post Info

Tagged As CSS

Comments are Open (3)

Posted at 08:01 AM

Comments

jerry

Thanks.

Typo on the second one (5px 10px):
top 5px
right 10px
bot 5px
left 10px

Posted by: jerry | July 14, 2004 08:21 AM

Tony

Thanks Jerry. I'm an awful editor, as is blatantly obvious. I fixed that.

Posted by: Tony | July 14, 2004 08:26 AM

Sandman

Usually i use only Margin & Padding like your examples, because to border, i must put other informations:
"border-style" (solid, dotted, dashed etc..)
and "border-color" (#f30;)

And i would write more text than before.

naturally i hope than you have some practice example to use border shorthands that i don't know :)

Posted by: Sandman | July 14, 2004 10:53 AM