Real quick tip here... something that I constantly forget. CSS Shorthand. In particular, when applied to margin or padding.
Say you have the following code:
p {
margin: 100px 20px 100px 20px;
}
This shorthand reads clockwise from the top. Margin of 100px from the TOP, then 20px on the RIGHT, then BOTTOM then LEFT.
What I always forget is that you can shorthand this shorthand.
p {
margin: 20px 100px;
}
What happens here is that the horizontal is read, then the vertical. So with this block of code you have a top and bottom margin of 20px, and a right and left margin of 100px.
If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
Anyways, I figured since I always forget that, you might as well. So here it is.
I talk more about CSS Shorthand elsewhere as well. More CSS Shorthand and More about the clock are two more entries that you might find interesting.
Comments are Open (12)
Posted at 11:06 AM
Comments
Ahmed k
Hum, NO!
I think you have a typo. Its margin: top-bottom left-right :)
ref: zvon.org
hope this helps
Posted by: Ahmed k | November 4, 2003 12:09 PM
Ahmed k
sorry, just to be clear:
p {
margin: 20px 100px;
}
Is same as > margin:20px 100px 20px 100px;
Posted by: Ahmed k | November 4, 2003 12:13 PM
Tony
Oh, you're absolutely correct. I did write that in wrong. Meant to write the other way.
Which is probably why I can never remember it. I corrected that, and added in the relevant quote from the W3C.
I hate typing in wrong information. I'm halfway tempted to delete your comments and just pretned that I was right all along. Oh well.
Posted by: Tony | November 4, 2003 12:24 PM
Ahmed k
Bah, its ok.
I?d do many more mistakes if my site actually had any content in it.
Posted by: Ahmed k | November 4, 2003 12:37 PM
Jason
Introduction to CSS shorthand properties
http://home.no.net/junjun/html/shorthand.html
Posted by: Jason | November 4, 2003 01:20 PM
Anne
You can try to remember it like TRouBLe => TopRightBottomLeft. Trick/tip from Eric Meyer.
Posted by: Anne | November 8, 2003 01:10 AM
Tony
The using all four in a row doesn't mess me up. It's using the two that I always forget or switch.
Posted by: Tony | November 8, 2003 06:19 PM
Tony
Don't be an idiot Apocalypse. What part of the opening sentence did you not understand?
"Real quick tip hereÖ something that I constantly forget. CSS Shorthand. In particular, when applied to margin or padding."
Not a guide. A tip. Something that I tend to forget. Not for all of the items. But just margin or padding.
Read before you post.
Posted by: Tony | November 24, 2003 07:33 AM
Tate
Such polite spam.
That kid probably stumbled on this page through cssvault.com - this entry is listed as "CSS Shorthand."
I always had to double check a reference when I tried the short method. Or I resorted to padding-left, etc... That is until I started thinking of it as clockwise, starting from 12 o'clock.
Also, to add to your tip:
p { margin: 2px 3px 0 10px }
I believe is also valid.
Posted by: Tate | April 23, 2004 05:57 PM
Tony
Yeah, that spam just slipped through. I hate comment spammers. There really isn't a punishment brutal enough. I'll have to go delete him now.
Posted by: Tony | April 24, 2004 03:37 PM
Tate
Are you running MT Blacklist? Never tried it myself, but it might help keep the place nice and tidy.
Also the newer versions of MT encrypt the URL's provided by commenters.
Posted by: Tate | April 24, 2004 04:10 PM
Tony
Yeah, I'm running Blacklist. It still has limitations though. Waiting for v3, see if TypeKey solves some of these problems.
Posted by: Tony | April 24, 2004 05:39 PM