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 trialJonathan Rodríguez Ferreira
6,075 PointsCan 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
14,636 Pointsyes 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 -
Joseph Damiani
1,066 PointsYes, it is in the same format as the margin (top, right, bottom and left).
Jonathan Rodríguez Ferreira
6,075 PointsI thought the format for the tree values property was: top, left and right, bottom.
Joseph Damiani
1,066 PointsIt is always clockwise.
Jonathan Rodríguez Ferreira
6,075 PointsJonathan Rodríguez Ferreira
6,075 PointsThank you! Now everything is clear :)