MartiniMon
asked on
CSS: Line spacing in a list
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;
}
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;
}
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.
ASKER
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
- 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
ASKER
spacing between the lines making up bullet 2 that are wrapping...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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;
}
Try something similar to this:
Open in new window
Increase or decrease the '6px' part as appropriate.