CODEWITHSUNDEEP
css
Jesper
Jesper

Reputation: 747

CSS: Understanding the padding statement

I am trying to wrap my head around the padding statement - I've seen a few uses of it that makes sense to me, but recently I came across this implementation:

padding: 30px 0;

Now I understand the first parameter, 30px, but what does the 0 represent?

Thanks in advance!

Upvotes: 0

Views: 98

Answers (3)

jpytc
jpytc

Reputation: 31

So, here is how it works:

If the padding property has four values:

padding: 25px 50px 75px 100px;

the top padding is 25px, right padding is 50px, bottom padding is 75px and 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 and bottom padding is 75px.

If the padding property has two values:

padding: 25px 50px;

top and bottom paddings are 25px and right and left paddings are 50px.

If the padding property has one value:

padding: 25px;

all four paddings are 25px.

Upvotes: 3

frnt
frnt

Reputation: 8795

Instead of defining padding as padding-top, padding-bottom, padding-right or padding-left, developer defines them as below,

div{
padding : 10px 10px 10px 10px /*top right bottom left*/
}

(or)

div{
padding : 10px 0px; /*10px is for top and bottom, whereas 0px is for right and left*/  
}

Upvotes: 4

Oriol
Oriol

Reputation: 288100

padding is a shorthand property of

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

It allows multiple values:

If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings 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.

Therefore, padding: 30px 0 sets padding-top and padding-bottom to 30px, and padding-right and padding-left to 0

Upvotes: 3

Related Questions