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

Design

Carlos Tafur
Carlos Tafur
2,952 Points
Posted by Carlos Tafur
Carlos Tafur
2,952 Points

Could be fine to use comments between </li> and <li>?

I think that another possible solution for non-desired spaces in the nav bar, if your editor highlighting makes comments not very noticeable (I'm not sure if there exists such a word, actually; my mother tongue is Spanish), is by inserting comments in between </li> and the next </li>:

       <li> . . . </li><!--
  --><li> . . . </li><!--
        .             .
        .             .
        .             .

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Carlos,

I don't know what this question is from but yes, that would be an acceptable solution if you don't mind how the source looks.

Here's a css tricks article that outlines a few methods for dealing with this problem: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

It includes your comment idea as well as a few other solutions.

At the end it suggests a few ways to avoid the problem altogether by using floats or flexbox.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

By the way, great job if you came up with that on your own.

I also wanted to add that if you were generating this html with a server side language then you could have it output the li's one after another like this:

<li>One</li><li>Two</li><li>Three</li>

That would also solve the problem. I wouldn't recommend doing this if you're writing and maintaining the html yourself because that's harder to read and maintain.