Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Padding

Jonathan Rodríguez Ferreira
Jonathan Rodríguez Ferreira
6,075 Points

Can I create a padding property with three values?

As with the margin property you can create one with three elements (top, right and left, bottom), I was wondering if you can do the same with the padding property.

2 Answers

huckleberry
huckleberry
14,636 Points

yes you can. You can create it with any number of values up to 4 just like the margin and yes, it adheres to the same exact sequencing like you thought.

Same with the border property.

Just to be clear for those that may be reading this and not quite sure what's being said...

The full 4 values for the padding property (as well as margin) in order -- as already stated by Joe up there -- are ...

padding: top right bottom left;

But in different combos they get applied to more than one side.

/*this single value gets applied to all 4 sides. top, right, bottom, left*/
p {
    padding: 5px;
}

/*this 2 value approach applies the first value to two groups of opposing sides. top&bottom, right&left */
p {
    padding: 5px 8px;
}

/*this 3 value approach applies the first value to a single side, the 2nd value to two opposing sides and the 
3rd value to a single side. i.e. top, right&left, bottom*/
p {
    padding: 5px 3px 8px;
}

/*the final 4 value approach will apply a different value to each side in the same clockwise fashion starting 
from the top. i.e. top, right, bottom, left*/
p {
   padding: 2px, 2px, 3px, 5px;
}

So, you were right in your initial assumption of the three values being top, left and right, bottom.

Cheers,

Huck - :sunglasses:

Yes, it is in the same format as the margin (top, right, bottom and left).

Jonathan Rodríguez Ferreira
Jonathan Rodríguez Ferreira
6,075 Points

I thought the format for the tree values property was: top, left and right, bottom.

It is always clockwise.