How to change the spacing on the Header Text

Is there any way to adjust the amount of space that appears above and below the text when using the Text Widget? 

Thanks.

If you want to reduce the space between the label (the text) and the box itself

insert this code:

.form-label-top, .form-label-left, .form-label-right {
    margin-bottom: 2px!important;
}

If you want to reduce the vertical space between each field, then check this guide

Thank you, but I'm actually referring to the "Text" widget, not the Text Fields or Text Areas. The widget that does nothing more than add a line of text with no field associated with it. 

Thanks.

@SteveSoler

We do not have "Text Widget" so I assumed you mean the Text Tool under Form Tools like on the image below?

Can you please let us  know the form in question so we can check the Text element? Basically, Text is always wrap with paragraph tags , you can remove these tags on the HTML editor (top toolbar when you click the text field) to reduce the spacing. Or you can inject the following CSS codes to your form.

.form-html p {

margin: 2px;

}

Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

This should get rid of the default paragraph top and bottom margins. If this doesn't work, let us know the form in question so we can inspect it here.

Regards!

Yes. The Text Tool is exactly what I am referring to. I tried the CSS you gave me but it didn't work.

Hello SteveSoler,

I did check all your form you have in your account (one form with multiple clone) and found that you only have one "Text" field in your form. 

Please inject the following custom css code in your and see if that makes any difference:

.form-html {

padding: 0px !important;

margin-top: -10px !important;

margin-bottom: -6px !important;

}

Please add just the values as per your requirement.

Thank you!

I tried your CSS but it didn't work. 

I have several clones because I always make a backup before making any changes just in case. 

If you notice my form has 3 Tabs. At the top of each tab is a Text header that I placed there. That is the text in question. The headers read:

How Can We Contact You?

Where Are You Located?

How Can We Help You?

I would love to change the amount of space above and below these words.

@SteveSoler 

Thanks for the clarification. We got it! :)

So it's not actually the Text Tool, it's a Header Tool. :)

Use the following CSS codes instead and inject it to your form.

.form-header-group {

padding-top: 4px !important;

padding-bottom: 4px !important;

}

This applies to all your headers. You can change the 4px value if you want to adjust it's top and bottom spacing.

Result:

Cheers!

My apologies to you all. I'm sorry. I'm not sure why I thought it was the Text tool, when it was actually the Heading tool I used. But thank you. The last CSS worked perfectly!

Hello SteveSoler,

On behalf of my colleague, you are welcome.

I am glad to know that your issue is resolved.

Do get back to us if you have any questions.

Thank you!