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

Posted by Alan Steffens
Alan Steffens
2,558 Points

List item spacing issues ... any sage advice?

I'm trying to eliminate the large white space between my list items and retain a normal spacing on a list item that wraps. I've been all over the web and tried everything I found, but nothing fixes the wrap problem and the spacing problem.

The only method I found that gets rid of white space between list items is to CSS style the li selector to line-height: 0.5em. That works, but then creates a problem when the list item wraps ... it overwrites the line above it.

From all my googling for a solution, it looks like thousands of people have asked the question, with no real solution listed. Can anyone there help with this? You'd solve the problem for thousands of us:)

Sure Erik -- see below: The main class is a display:block and its purpose is to display a background image that the maintextarea display:inline-block will write on top of. You'll see the only way I could find to eliminate spacing between list items was with the line-height: 0.5em CSS. That causes an overwrite effect if the list item wraps. That overwrite effect is what I'm trying to fix, which unfortunately is caused by the line-height: 0.5em. I'm looking for another way to remove the line spacing between list items that won't affect list item text wraps.

CSS file .largertext { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 0.9em; font-weight: normal; line-height: normal; } .floatlist ul { list-style-type: circle; padding-left: 30px; line-height: 0.5em; list-style-type: disc; }

HTML file <!-- link include to CSS file --> <style> /* internal CSS /* .main { position: relative; width: 1000px; height: 700px; background-image: url('images/supplychain.jpg'); background-repeat: no-repeat; display: block; } .maintextarea { /* 100% (whole space) - 6.1429% (footer size 43px/700px) = 93.8571% but had to tweak that*/ height: 94.2%; width: 100%; display: inline-block; vertical-align: top; padding: 70px 25px 0 515px; overflow-x: auto; } </style> <body> <div class="main"> <div class="largertext maintextarea"> Leading text to list<br/> <br/> <div class="largertext floatlist"> <strong>List Header</strong> <ul> <li>List Item 1 ----------------------------------should wrap at about 60 characters in current design</li> <li>List Item 2</li> <li>List Item, 3</li> </ul> </div> Text after list </div>

<!----------------------------- FOOTER (inside MAIN AREA) --------------------------------> /* footer code goes here */ </div>

Erik Nuber
Erik Nuber
20,629 Points

Can you please provide your code. It makes a difference if you are using block, inline-block, flexbox etc... This isn't enough information to be able to help you.

Alan Steffens
Alan Steffens
2,558 Points

Arrrgghh. When I added the code to my question it stripped out the line breaks.

Kathryn Notson
Kathryn Notson
25,941 Points

Alan Steffens:

It appears your line breaks are typed incorrectly. You show <br/><br/>. That's incorrect. A line break is <br> only. A line break doesn't have a closing tag. (The "/" is not in the correct position anyway if a line break used it.)

6 Answers

Alan Steffens
Alan Steffens
2,558 Points

So the real answer here ended up being simple. If for some reason you find your list items are double-spaced and your sprawling website has several add-ons (menu buttons, timeline and/or image sliders, etc.) that add to the complexity of your CSS, the solution to list item spacing is all in the li padding. Add the following code to your CSS file, internal HTML file or in-line: li { padding: 1px; }. This gives you a small gap between list items and overwrites anything else that may have been interfering with your desired list item spacing.

Alan Steffens
Alan Steffens
2,558 Points
Alan Steffens
Alan Steffens
2,558 Points

A break as a <br/> and a <br> are equal in HTML. Browsers take both and my older dev platform flags me if I don't have the / after the br. As a test I took the / out of the break commands, saved and republished ... it made no difference. Thanks for trying, but I don't think there is an answer to this issue based on the no response from all the experts there that I "asked" to answer, and all the unanswered posts to the same question on the web. I hope to be proven wrong:)

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

CSS file 

.largertext { 
color: white; 
font-family: Arial,Helvetica,sans-serif; 
font-size: 0.9em; 
font-weight: normal; 
line-height: normal; 
} 
.floatlist ul { 
list-style-type: circle; 
padding-left: 30px; 
line-height: 0.5em; 
list-style-type: disc; 
}

HTML file <!-- link include to CSS file --> 
<style> /* internal CSS /* 

.main { 
position: relative; 
width: 1000px;
 height: 700px;
background-image: url('images/supplychain.jpg'); 
background-repeat: no-repeat; 
display: block;
 } 

.maintextarea { /* 100% (whole space) - 6.1429% (footer size 43px/700px) = 93.8571% but had to tweak that*/ 
height: 94.2%; 
width: 100%; 
display: inline-block; 
vertical-align: top;
padding: 70px 25px 0 515px; 
overflow-x: auto; 
} 
</style>

<body> 
<div class="main"> 
     <div class="largertext maintextarea"> Leading text to list<br/> <br/> 
          <div class="largertext floatlist"> <strong>List Header</strong> 
          <ul> 
              <li>List Item 1 ----------------------------------should wrap at about 60 characters in current design</li>  
              <li>List Item 2</li>
              <li>List Item, 3</li> 
          </ul> 
         </div> 
     Text after list
     </div>

<!----------------------------- FOOTER (inside MAIN AREA) --------------------------------> /* footer code goes here */  
</div>
</body>

you need to target what you are actually trying to space. Nothing that you have in this code will do that for you. Below targets just the list items. You can be more specific if you give your ul or li items a class name in case you have more li tags on a given page. The line-height will control the spacing between lines and, when a long li wraps, it will maintain it's proper spacing.

edit: I didn't reread your question and saw you already mentioned this. When I put this in, the white space is maintained. Maybe something else is going on. Increased the line height should take care of the issue, there isn't enough space at .5em. 

li {
  line-height: 1.9em

}

Here is a codepen I used your code and, just added the li tag info so you can see that it works.

http://codepen.io/pen/

Alan Steffens
Alan Steffens
2,558 Points

Changing the list item line height undoes tightening up the spacing between the list items, so that is not what I was after. I'm trying to remove the double-spacing between the list items without affecting the wrap spacing. Changing the ul or li spacing to line-height:0.5em removes the white space between list items, but messes up the spacing on a wrap (causes the second line to overwrite the first). There appears to be no way to fix both. Any idea how to get the best of both worlds?

Not sure in this world of tightening up space on your website, why the HTML and CSS gods would default line spacing between list items to be 2em. Makes no sense to me and stretches way out what you are trying to convey.

Erik Nuber
Erik Nuber
20,629 Points

If it isn't to much of a hassle, could you create a workspace for your code and take a snapshot so I can fork it. I am not seeing what you are and would be easier if I could visually see it.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Never mind, I think I have an answer for you. I found this page, it talks about pre-wrap and pre-line. It might actually take care of what you want to do.

https://css-tricks.com/almanac/properties/w/whitespace/

Alan Steffens
Alan Steffens
2,558 Points

I read through all that and added an internal style li {white-space: pre-wrap;} and later tried pre-line. Neither worked. I've never used Workspaces. Let me figure out how to do what you asked earlier and I'll get back to you in this post. Doing that now. Thanks for your responses!

Alan Steffens
Alan Steffens
2,558 Points
Alan Steffens
Alan Steffens
2,558 Points

OK. When I used Workspaces with everything else stripped out, there was no white space between list items. That appears to be the default. Something in the large mass of code I have in my website is affecting the list item spacing causing it to be double-spaced. I'm hoping the Developer Tools in Google will help me find that. Erik's suggestion to use Workspaces was the sage advice I was seeking. I appreciate everyone's help ...

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

Alan Steffens:

Not in HTML5 that I'm aware of. I've never seen the "/" behind the HTML5 tag element name. I've only seen it like this: <br></br> (if that were legitimate). Team Treehouse uses HTML5 & CSS3 in their courses.

Sorry that didn't work out for you.