How can I add space between unordered list items?

I tried going into the Design interface, selecting the CSS tab, and adding the following:

li {

margin-top: 20px;

padding-top: 20px;

}

as well as...

list-item {

margin-top: 20px;

padding-top: 20px;

}

But it didn't affect the presentation of my list.

Inject the following CSS code as explained on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

#text_77 li{

    padding-top: 10px !important;

}

Result:

Let us know if you need more help, we will be glad to assist you.

Thank you! How might I have identified the ID as #text_77?

I'm glad David's suggestion worked. There are 2 ways to get the ID of a field:

1. The easy way - Use our FORM DESIGNER. Click DESIGN at the top > ADVANCED DESIGNER > CSS tab > then double click the field (note, you need to double click it to get the ID)

2. The traditional way - Using the browser console and inspect the element

There's also another way but this doesn't apply in your case since the field you're targeting is a TEXT (HTML) field. For other QUICK or BASIC fields, you can get the IDs by following this guide on How-to-find-field-IDs-and-names

I would also recommend you avoid targeting default DOM elements (e.g. li, ul, p, etc.) It's better to adjust the CSS of classes and IDs to avoid conflicts with other elements on your form.

Wow! Thank you for the video demonstrations! I've never seen anything like it in a forum like this! It's tremendously helpful!

Okay, so your recommendation:

• The wrong thing to do is what I tried originally: li { padding-top: 20px; }

• The right thing to do is what you demonstrated: #text_77 li { padding-top: 10px !important; } even though it includes a reference to the "li" element?

Exactly, by adding the ID of the field, you are specifying the field where they style should be applied to, in order to avoid affecting other elements in your form.

Open a new thread if you need anything else, we will be glad to assist you.