28

I am playing around with the Less Framework 3 and I saw this line in the css:

body {
    padding: 60px 42px 0;
    width: 396px;
}

what does padding: 0 do?

This does not look like normal css shorthand, and top-right-bottom seems weird.

George Stocker
  • 57,289
  • 29
  • 176
  • 237
tabaluga
  • 1,377
  • 4
  • 20
  • 27
  • 8
    @Joel Etherton, really, SO should answer this and thus trump any Google search. When on SO, SO is strongly preferred over Google. – jball Jan 24 '11 at 16:08
  • @jball - Truly, I disagree with you. Often I find that answers provided on SO are neither more nor less reliable than other answers found through various searching means. Just because it isn't on StackOverflow doesn't mean it's wrong. Just because it's on StackOverflow doesn't mean it's right. And 5 minutes of RTFM would have answered his question. – Joel Etherton Jan 24 '11 at 16:17
  • 3
    @Joel Etherton, I suppose you think [How do I move the turtle in logo?](http://stackoverflow.com/questions/1003841/how-do-i-move-the-turtle-in-logo) is a bad question for SO as well? – jball Jan 24 '11 at 16:26
  • @jball - I can't really answer that. I don't know what resources were available when that question was asked, so I don't know what information was available at the time. Currently that post is the highest indexed on Google for that topic so your attempt at sarcasm is wasted. Not to mention that Spolsky's intention was to pose the question for future learning of other individuals where simpler means were not available. Do you suppose that is OP's intent here? I thought not. – Joel Etherton Jan 24 '11 at 16:39
  • 7
    @Joel Please read [How to deal with Google questions](http://meta.stackexchange.com/questions/8724/how-to-deal-with-google-questions). How would you like your Google results to one day all point to SO questions with the only answer being "Did you try Google?" – moinudin Jan 24 '11 at 16:41
  • @Joel Etherton, you're making a lot of assumptions about what my intent and point was in my last comment. It is an example of a very simple question. The fact that it is the result of a search for that question on Google is an example what SO is attempting to do for all questions that are allowable per the FAQ. – jball Jan 24 '11 at 16:47
  • 11
    @Joel: marcog is right. We want the correct answers to be found here. SO will be considered worthless by people who get here through a Google search if the top answers and comments are "Did you try Googling it." That was one of the problems with typical message boards that SO was designed to solve. – Bill the Lizard Jan 24 '11 at 17:07
  • @jball, @marcog, @Bill the Lizard: I read and respect what you're saying. Crazily enough, I still disagree with your opinions. This question is easily answered by simply reading the manual ( http://www.w3.org/TR/REC-CSS1/#padding ) ...which I found on Google. – Joel Etherton Jan 24 '11 at 17:51
  • 7
    @Joel almost a year later... I'm a backend guy, no up front experience in CSS or anything like that. If I google for "CSS padding third value" you know where I'm brought? This question. – corsiKa Dec 08 '11 at 17:49
  • 1
    @JoelEtherton: it is 2015, over 4 years later and I had a brain fart when seeing some old code. Googled "padding with 3 values" and this was the 2nd result. While w3schools was listed first, I come here because I learn about things better or can see related questions at the right side of the page. I think that others find it a more relaxed and equally reputable source of information. – chris Aug 24 '15 at 17:34

4 Answers4

77

The padding and margin properties specify top right bottom left.
If left is omitted, it will default to right.

Thus, padding: a b c is equivalent to padding: a b c b.

If bottom is also omitted, it will default to top.
Thus, padding: a b is equivalent to padding: a b a b.

If right is also omitted, the single value is used for all 4 sides.
Thus, padding: a is equivalent to padding: a a a a.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Re CAFxX's comment above: I find (pathetically) that the word "tribble" helps me remember the arcane order of CSS shorthand properties... :-) – T.J. Crowder Jun 09 '13 at 15:31
  • @T.J.Crowder - That helps when you're in _trouble_ (just to add to the mnemonic madness ;-) – jahroy Jun 14 '13 at 03:35
7

When you specify three values the second is implicitly used for the fourth, i.e. padding: 60px 42px 0 42px;

CAFxX
  • 28,060
  • 6
  • 41
  • 66
6

There are three shorthand versions when specifying the four thickness values. These shortcuts also apply to similar properties, such as margin, outline and border.

Specifying 1 value:

margin: 10px;
/*same as*/
margin: 10px 10px 10px 10px;

...means use 10px for all 4 sides.

margin: 10px 15px;
/*same as*/
margin: 10px 15px 10px 15px;

...means use 10px for top and bottom and 15px for left and right.

margin: 10px 15px 20px;
/*same as*/
margin: 10px 15px 20px 15px;

...means use 10px for top, 15px for left and right, and 20px for bottom.

Surreal Dreams
  • 26,055
  • 3
  • 46
  • 61
1

The best ever explain by W3School:- http://www.w3schools.com/css/css_padding.asp

So, here is how it works:

If the padding property has four values:

padding: 25px 50px 75px 100px;
    top padding is 25px
    right padding is 50px
    bottom padding is 75px
    left padding is 100px

If the padding property has three values:

padding: 25px 50px 75px;
    top padding is 25px
    right and left paddings are 50px
    bottom padding is 75px

If the padding property has two values:

padding: 25px 50px;
    top and bottom paddings are 25px
    right and left paddings are 50px

If the padding property has one value:

padding: 25px;
    all four paddings are 25px
gopal sharma
  • 129
  • 1
  • 6