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

HTML How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

Posted by Perri Smith
Perri Smith
1,726 Points

padding for top (Solved)

Hello, I am trying to understanding padding. Sometimes in the css, I have seen 2 numbers or 3 numbers or 4 numbers. Below I am getting incorrect work, but I am not sure why and I am not sure how many numbers I should use.

Thank You, PNS

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  margin: 0 10px 0 10px;
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  font-weight: 800;
 padding: 15px 10px 15px 10px;
}
Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points
Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points

You can also edit your post's heading by writing the starting word like [ SOLVED ] if you are satisfied with the answers or your problem is solved. And you may select the best answer which you liked most to encourage the community to provide best answers.

2 Answers

Rasbin Rijal
PLUS
Rasbin Rijal
Courses Plus Student 10,864 Points
Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points

Hi Perri Smith, this should help you understand :

padding:10px 5px 15px 20px;

top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px

padding:10px 5px 15px;

top padding is 10px right and left padding are 5px bottom padding is 15px

padding:10px 5px;

top and bottom padding are 10px right and left padding are 5px

padding:10px;

all four paddings are 10px

You can also specify individual padding like this way but the previous method are good to use :

padding-top: 10px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 20px;
Perri Smith
Perri Smith
1,726 Points

Thank You! This was very helpful!

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Padding (and margin) values work like this:

All 4: top right bottom left (clockwise from the top)

3: top left-and-right bottom

2: top-and-bottom left-and-right

1 top-and-right-and-bottom-and-left

Perri Smith
Perri Smith
1,726 Points

Thank You!