I would like to follow up on this post and refer to this response in particular.
i tried @cderv solution, and it works great, obviously, awesome tip, thank you so much, but I ran into one unexpected issue, i believe. I passed my CSS rule as advised, but it was overridden and I do not know by what. In my case, I am using the revealjs metropolis template. I searched the template, but as a newbie, I could not find anything relevant.
When I inspect the html file as per Christophe's suggestion, I do see my command:
.reveal .slide ul li, .reveal .slide ol li {
margin-top: 0.2em;
margin-bottom: 0em;
}
(index.html:968)
but now the two margin commands are striked out. It's striken out and indeed, just above, there is:
.reveal .slide ul li, .reveal .slide ol li {
margin-top: 0.4em;
margin-bottom: 0.2em;
}
(index.html:1573)
no idea where this one comes from, but i do not want it! looking at the numbers, I am guessing it's overriding my command too.
I would like to check whether the solution is then to specify the following !important switch in my css file:
/* list items (li) within unordered lists (ul) */
.reveal .slides section ul li, .reveal .slides section ol li {
margin-top: 0.2em !important;
margin-bottom: 0em !important;
}
within my css file? is this the correct approach or am I doing something wrong and should be doing something else? This approach works, as it forces my css command to override the override!!, but I read that it's poor coding practice to be using !important, and worse, it could cause unexpected adverse effects. Is that true? What is your suggestion? thank you so much for any pointers and sorry for troubling you with this.