anyone here good with basic CSS and HTML?

[mellowtigger]

When I use lists, I like having extra vertical space between each listed item. I have done it for years here by deliberately adding two line breaks at the end of each line as:

<br/><br/>

I'd prefer something easier, so I can do it once and not have to repeat it for every item in the list. I tried the following code, and it works great in a test editor, but it fails in an actual Dreamwidth page.

<p>
<style type="text/css">
  li { margin-bottom: 1em; }
</style>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</p>

I'd rather have an inline code that I put into the OL element, but I couldn't even get that much to display properly in the test editor. I thought I knew my basics, but this simple problem has me stumped. (Please don't make me learn Dreamwidth Journal Themes. I'm going to have to learn Dreamwidth Journal Themes, aren't I?) Any suggestions?

Comments

[bitterlawngnome]

Ask the help desk. They take a long time to reply but generally have useful info.

[mellowtigger]

Done. I see that on average I pester them only once every 2 years or so, and some of those were legitimate service outages at the time. So hopefully that means I'm managing my "I'm lost" pleas to them responsibly. :)

[darkoshi]

Did a search and tried some things out. This works with my journal theme:

<ol style="display:grid; gap:1em"> <li>A</li> <li>B</li> <li>C</li> </ol>

[mellowtigger]

Testing, testing...

1. One...
2. Two...
3. Three.

Oh, hey that code does work! I didn't know about HTML grids. Apparently that the new internal design for tables? It sounds like they're intentionally designed to solve exactly the kind of micro-management problem I was having. I'm learning something new today. Thanks! :)