CODEWITHSUNDEEP
css
tabaluga
tabaluga

Reputation: 1417

What is the third value in CSS padding?

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.

Upvotes: 30

Views: 10560

Answers (4)

gopal sharma
gopal sharma

Reputation: 131

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

Upvotes: 1

SLaks
SLaks

Reputation: 887385

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.

Upvotes: 78

Surreal Dreams
Surreal Dreams

Reputation: 26380

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.

Upvotes: 6

CAFxX
CAFxX

Reputation: 30301

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

Upvotes: 7

Related Questions