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
William J. Terrell
17,403 PointsWhy does the white-space in-between the <li> tags cause an issue?
I'm not understanding why the browser interprets the white-space between the < li > tags as actual white-space rendered on the screen. I thought the browser ignores white-space unless there are < pre > tags in the code.
Furthermore, is there any way to type the tags in the comments or questions without them disappearing? When I try to type < li > without the spaces, it disappears. (I know there is the one method of using the three back-ticks (```), but it hardly seems appropriate to break form and designate a whole line or section for code when I only want to ask about one tag)
Thanks!
2 Answers
Jeff Lemay
14,268 PointsFor the second part of your question, no, there's no way to type tags in here without using the backticks ```. I'd imagine it is a security measure to prevent html and other tags without designating that you're in a code block.
For the white-space issue, hell yeah it's annoying. But nothing we can do about it. Take a look at this article by css tricks for working around it.
Liam Maclachlan
22,805 PointsHonestly, I don't really know why it does but my fix for this is to set the font size of the parent 'ul' to 0 and the child items to 1rem. works like a charm :)
ul {
font-size: 0px;
}
ul > li {
font-size: 1rem;
}
Some people call it a bug... I call it a feature! ... not really, it's a bug.
In relation to backticks...yeah, you gotta use them. As you can see, I often replace the angled brackets for single quotes. Works okay :)
EDIT: Just checked out Jeff Lemay's answer, Seems that CSS-tricks use a similar one but in 'px', not rem :)
William J. Terrell
17,403 PointsI think I have a better understanding of it now: I was just wondering why the browser interpreted the white-space in-between the tags the way it does, but looking at Jeff's link to CSS Tricks, I guess it's just how the browser interprets elements that have the "inline-block" styling applied to them.
Anyway, interesting... Thanks for the feedback and information! :)
Liam Maclachlan
22,805 PointsJust chewing the fat a bit, but could it be that it is between an element that renders text?
The 'ul' tag, after all, can render text the same way an 'li' or 'p' tag would. That might be the answer, possibly :)
EDIT:...I've just reiterated what you said. All good...
William J. Terrell
17,403 PointsRight... The < ul > tag is a "container", which contains smaller < li > containers, but only when you put them inside...
Like Tetris, the screen has space inside it, that gets filled with the block-clusters...and sometimes there is space in-between them...
So it is perhaps just that the browser reads that space in-between as being "actual space", because the space itself is inside an element ( < ul> < /ul> ).
Liam Maclachlan
22,805 PointsYeah, I think that is pretty much it. The 'li' elements are block level lements. Making the 'ul' container's children react as 'inline-block' will cause the ' ' (space) to render on screen. I think we must be somewhat close with that =p