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 Basic Selectors ID Selectors

Posted by Laura Fernanda Canon Nino
Laura Fernanda Canon Nino
5,772 Points

Hi. Why when I set a padding my UL bullets are showing outside my box?

skills-list {

background-color: aliceblue;
padding: 5px;

}

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

The UL bullets by default are styled with a certain separation between themselves and the content they're assigned to. And since padding increases the space between the content of an element and the border of an element, that will further increase the available space.

Jamie Moore
Jamie Moore
3,997 Points
Jamie Moore
Jamie Moore
3,997 Points

Jonathan is correct, but I also just wanted to add that you can change the position of the bullets with the list-style-position property. The MDN docs has a good example of how this can be used: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

Further down the line, you'll probably be creating your own bullets with an :after or :before psuedo-element which gives you far more options on how to style/present your bullets.