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 Display Values

G H Mahimaanvita
G H Mahimaanvita
16,234 Points
Posted by G H Mahimaanvita
G H Mahimaanvita
16,234 Points

padding is outside the background color of the link

The padding property affects the space between text and the border and the color of that space is that of the background color of the element. But, when padding is applied to the link element in the list, a white space is created between the text and the border instead of tomato color. Why?

Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

Please always show your code, because it might be a looot of things that is making something wrong..

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

If padding is applied to the link itself, I would expect the background color would also be extended. But if the padding is applied to the containing element, and that element has no background, then I would expect white space.

If that's not it, please show the actual code involved. To easily share your entire project, make a snapshot of your workspace and post the link to it here.

G H Mahimaanvita
G H Mahimaanvita
16,234 Points
G H Mahimaanvita
G H Mahimaanvita
16,234 Points

oh, I get it now. I tried applying padding to the link and now its background color extended. But if I apply padding to the list item, it takes the background color of the list item, not the link. Here is the code:

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
background-color: tomato;
padding: 10px;
}
li {
  display: inline-block;
  border-right: 2px grey solid;
  padding: 0 12px;
  margin: 80px 0;
}

Thanks for your help!!