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

Posted by Lynn Patricia
Lynn Patricia
7,908 Points

Why are list items not full width of the text in it's div?

Elements displayed as a block are said to take up the full width of the parent element yet the list items that are displayed as block items (3:40 in the video) are only as wide as the text of that list item. The tomato background color does not extend the full width of the div. Why is this?

Manuel Pascual
Manuel Pascual
4,676 Points
Manuel Pascual
Manuel Pascual
4,676 Points

That's because the tomato background is used for the anchor elements, which are inline elements.

Lauri Neuding
Lauri Neuding
13,525 Points

All elements have default states. You can use css to override defaults. If you want your list items to stretch full width you can be overriding the default state, but there is more to it than simply manipulating padding. For instance an li as a default bullet. For instance, I snagged this from w3schools:

The list-style-position property specifies whether the list-item markers should appear inside or outside the content flow:

Example ul { list-style-position: inside; } Here is the page if you want more information: http://www.w3schools.com/css/css_list.asp

1 Answer

Daniel Jenkins
Daniel Jenkins
17,714 Points
Daniel Jenkins
Daniel Jenkins
17,714 Points

Earlier in the video (around 2:00) the instructor sets the background colour of anchor elements to tomato, and the display value to 'block' as part of his demonstration. Some of these anchors sit inside the aforementioned list elements and do span the entire width of the parent element at that point. He then removes the display: block setting from anchor elements (at around 2:25) so that they revert to their default state as inline elements. As Manuel pointed out in his comment, the tomato background is only ever used for the anchor elements, not the list elements.