This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Padding is often used to give an element's content area some breathing room by separating the content from the surrounding border area.
Padding Reference
We can define values for padding as any length or a percentage unit. There are two ways we can set the values for padding. The first way is setting each property individually:
.wildlife {
padding-top: 100px;
padding-right: 120px;
padding-bottom: 50px;
padding-left: 20px;
}
We can also use the shorthand property for padding, which lets us set the padding on all four sides in one declaration:
.wildlife {
padding: 100px 120px 50px 20px;
}
The order of the values is: Top, Right, Bottom, Left. Think clockwise.
You need to sign up for Treehouse in order to download course files.
Sign up