list item spacing top and bottom

[cayennep]

Would appreciate some hi-level tips of how to approach this - eg, set the ol and ul margins, top and bottom?? or just bottom? or set it at the li level??

I'm still dealing with a previous stylesheet, since I can't get rid of it until I go through every topic and apply my new styles from my new stylesheet.

However, looking at the formatting for list items is really confusing. I'm ending up with way too much space between them, or none at all. As I experiment I'm breaking it even more - esp with multiple layers of lists and paragraphs.

The w3c talks about lists, and margins, but not really how they work together. I've never had these issues in the past - think Flare's 'default' stylesheet has less in it, but also because I have multiple ones.

Any help greatly appreciated, where to start and which elements to format, and maybe in what order. Seems odd I can't get a 'reasonable' amount of space in lists, whether setting no margins or whatever.
thanks for any tips

[Psider]

A common gotcha is when you have a p inside your li. You'll get extra space from the p margin, assuming you have that set.

For example, with this code you'll get large space above and below the second bullet point, because it's getting top and bottom margins from the p.
p { margin: 20px 0; }
li { margin: 0; }

<ul>
<li>First</li>
<li><p>second</p></li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>

So you might want a complex selector to zero out the margin on p inside li:
li p { margin: 0;}

But it is really complex depending on your content, for example if you have multiple paras inside your li. I also tend to only add either top or bottom margins, but not both as it makes things easier when you know the margin is only on one side (https://css-tricks.com/what-you-should- ... g-margins/ and https://developer.mozilla.org/en-US/doc ... collapsing ). I usually go with top margin, but I read an interesting argument for only bottom margin (https://csswizardry.com/2012/06/single- ... larations/).

I also love playing with a really simple html page outside of any tool, just to see what's going on. For example, with the following, I've used divs so I can target different spacing to see what happens to my margins. Or I could change the margin to padding for one, so see how that looks different.

p { margin: 20px 0; }
li { margin: 0; }
ul {
margin-top: 40px;
border-top: 4px solid lightblue;
}

div.second li p { margin: auto;}
div.third li p { margin: 0;}

<div class="first">
<ul>
<li>First</li>
<li><p>second</p>
<p>a para in the li</p>
<p>another para in the li</p></li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
</div>

<div class="second">
<ul>
<li>First</li>
<li><p>second</p>
<p>a para in the li</p>
<p>another para in the li</p></li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
</div>

<div class="third">
<ul>
<li>First</li>
<li><p>second</p>
<p>a para in the li</p>
<p>another para in the li</p></li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
</div>

[cayennep]

wow, thanks for alla this - not sure I'll investigate this far as I solved it (somehow, clearing out settings and kind of starting over), but thanks

not using divs either, and was hoping for hi-level to get the jist, but since I fixed it all good

Now trying to sort out the huge indents for nested lists, but will make another post.

[Psider]

wow, thanks for alla this - not sure I'll investigate this far as I solved it (somehow, clearing out settings and kind of starting over), but thanks

not using divs either, and was hoping for hi-level to get the jist, but since I fixed it all good

Now trying to sort out the huge indents for nested lists, but will make another post.

The divs are just for testing out settings in a sample html file. So, for example, I can try out padding just on the third div and compare it to my base code represented by the first div; I never target that first div with specific styles. Then in the real stylesheet in Flare I just use the bit after the div (for example, li p {margin:auto;} ).

Also, when I get my list indenting in a knot, I tend to comment out all the margin, padding, text-indent type styles, at least on everything list related, and gradually add them back, comparing what changes.

[cayennep]

I did zero everything out, somehow got it fixed after that

I'm using the formatting inspector in flare, as well as chrome - but still can't tell all that's going on.

Good tip about the divs, not sure it doesn't add complexity for this right now but good to know!

Will have a look at text-indent, tho I didn't see that as a factor.

It seems the problem is that whatever is on the containers is multiplied, so indents just get bigger and bigger.

Thanks for commenting