Title: Changing gap/spacing between fields
Last modified: August 30, 2016

---

# Changing gap/spacing between fields

 *  Resolved [NW1](https://wordpress.org/support/users/nw1/)
 * (@nw1)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/)
 * I have a form that uses the following basic layout:
 * Instruct. Text field
    Number field Dropdown field
 * At the moment, there is a large gap between each of these fields, and I want 
   to move them closer together.
 * I tried adding the following code to stylepublic.css to see if it would change
   the Instruct. Text field:
 * #fbuilder .comment_area label { padding: 2px; margin: 2px; }
    #fbuilder .comment_area
   span { padding: 2px; margin: 2px; }
 * But it hasn’t worked. Can you help?
 * Thanks!
 * [https://wordpress.org/plugins/calculated-fields-form/](https://wordpress.org/plugins/calculated-fields-form/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329412)
 * Hi,
 * The issue you describe usually occurs when the theme active in your WordPress
   defines global styles. For example, assigning a padding or margin, to all div
   tags on webpage, or to all label or span tags on page, etc.
 * Could you send me the link to the webpage where was inserted the form to take
   a look, please?
 * Best regards.
 *  Thread Starter [NW1](https://wordpress.org/support/users/nw1/)
 * (@nw1)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329544)
 * Thank you for your fast response.
 * I’ve looked at the theme, and based on what you’ve said, here are some of the
   pieces of CSS (I’m using the Responsive theme) that might be responsible:
 * pre {
    padding: 6px 10px; }
 * input[type=”text”],
    input[type=”password”], input[type=”email”] { padding: 6px
   8px; }
 * select {
    padding: 6px 8px; }
 * area,
    textarea { padding: 8px 10px; }
 * p,
    hr, dl, pre, form, table, address, blockquote { margin: 1.6em 0; }
 * input,
    textarea { padding: .3em .4em .15em; }
 * select {
    padding: .1em .2em 0; }
 * option {
    padding: 0 .4em; }
 * form div {
    margin-bottom: .8em; }
 * Also, all headings have large top and bottom margins defined, and I’m not sure
   if the Instruct. Text field uses heading CSS.
 * Would any of the above things be causing the excessive space between form items?
 * And if so, can you help with how I change the CSS to reduce the margin/padding
   just for the Calculated Fields Form items?
 * I think I might need to define a special class in the CSS layout keywords section
   for the form elements and then add the CSS to my theme or stylepublic.css, but
   not sure exactly what CSS to include.
 * Thanks in advance for your help!
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329581)
 * Hi,
 * Yes, you are right, the styles sent in your ticket are modifying the paddings
   and margins of tags like: input, select, textarea, and form. So, you should re-
   define this styles but using the #fbuilder selector in front, to modify only 
   the appearance of elements in the forms created with CFF:
 * #fbuilder input{}
    #fbuilder textarea{} #fbuilder select{} #fbuilder form{}
 * Remember to define the CSS rules in the previous styles.
 * Best regards.
 *  Thread Starter [NW1](https://wordpress.org/support/users/nw1/)
 * (@nw1)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329586)
 * Thank you once again for getting back to me so quickly 🙂
 * I included the following to stylepublic.css:
 * #fbuilder input,
    #fbuilder select, #fbuilder textarea, #fbuilder form { padding:
   2px 0px; margin: 2px 0px; }
 * However, this didn’t change make any change on the form page.
 * Is there something I need to fix in the code above?
 * Or should I be putting this in my theme’s stylesheet instead of stylepublic.css?
 * My knowledge of CSS etc is very limited, so my apologies for all the questions!
 * Thanks again for your help 🙂
 *  Thread Starter [NW1](https://wordpress.org/support/users/nw1/)
 * (@nw1)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329587)
 * PS: also, when you said “Remember to define the CSS rules in the previous styles”,
   I’m not sure what this means. Can you clarify? Thanks!
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329595)
 * Hi,
 * The styles definitions are correct, but I don’t know where you have been included
   these styles. Could you send me a link to your page to check the styles definition,
   please?
 * Best regards
 *  Thread Starter [NW1](https://wordpress.org/support/users/nw1/)
 * (@nw1)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329621)
 * Just an update for anyone reading: because our website is still in development,
   I sent the page URL to codepeople by PM.
 * They got back to me very quickly with exactly what code I needed to add to my
   stylesheet to make everything work perfectly as I needed it.
 * So I just wanted to finish this thread by saying how amazing codepeople are with
   their service. I have left 5-star feedback on the plugin already as well.
 * Thank you! 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Changing gap/spacing between fields’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [NW1](https://wordpress.org/support/users/nw1/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/changing-gapspacing-between-fields/#post-6329621)
 * Status: resolved