CSS: Line spacing in a list

MartiniMon
MartiniMon used Ask the Experts™
on
Thanks for reading, please be sure to read the entire post before replying.

I have a UL. Some list items wrap to more than one line. I want to have a larger that normal line heights between the li's but not between the wrapped lines that belong to the SAME li.

I'm going to write it again:

I want to have a larger that normal line heights between the li's but not between the wrapped lines that belong to the SAME li.

how can i do this in css? thanks!

right now i've tried:


#myList ul {
      line-height: 1.75em;
}

#myList li {
line-height:normal;      
}
AND/OR
#servicesList ul li {
line-height: normal;      
}


Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ovid BurkeConsultant Instructor

Commented:

Try something similar to this:

#myList li {
    margin: 6px auto;
}

Open in new window



Increase or decrease the '6px' part as appropriate.
Carlos LlanosIT Manager

Commented:
Can you possibly add some padding to li let's say...top 2nd, bottom 2px? I can't test it on my phone, but try that and see if it affects the li that wraps...I'll work on it tomorrow Iif no other expert has found the solution.

Author

Commented:
Hi - thanks for the reply; This works great for separating the li's, is there a way to specifically control the spacing, however, within the same li when text wraps onto a second or more line?

- bullet point 1

-bullet point 2 is really long and some people might say it should not be in a list but this is what the powers that be require lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

- bullet point 3 etc
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Author

Commented:
spacing between the lines making up bullet 2 that are wrapping...
Consultant Instructor
Commented:
But your original request says that you only wanted to increase the spacing between list items (li). If you would like to change the spacing for lines in a particular li then you may try something like:

li.specialSpacing {
    line-height: 20px;
}

Open in new window


then on the specific li you would implement by:

class="specialSpacing"

Open in new window

Commented:
give your UL the class name of "spacer" and this will kill all padding for all li on that list, and add space below your li item only, giving the separation you are looking for while keep line heights consistent. you may add your other styling (line height itself, color, etc.) to it as needed. Applying it to the ul keeps you form having to apply the class to each li separately, saving a little work:
ul.spacer li {margin:0;
padding-bottom:0 0 15px 0;}

or longhand:

ul.spacer li  {margin:0;
padding-top:0;
padding-right:0;
padding-bottom:15px;
padding-left:0;
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial