PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Margins on input boxes

  1. Hi Guys
    I am just trying to reduce the size of the gap between my input fields, and in my css I have:

    #left form {
    	margin-left: 50px;
    #left input {
    	margin-right: 20px;
    	margin-bottom: 15px;
    	padding: 3px;
    #left label {
    	width: 7em;

    So I reduced the margin-bottom on the input from 15px to 5px and this has reduced the size on some forms but not others.
    One form it did work on is this one:
    but 2 it didn't work on are on this page:

    Any help appreciated, thanks.

    Posted 10 years ago on Tuesday September 13, 2011 | Permalink
  2. It appears that your styles are being applied in the second page.


    The label width value is being overwritten, but you can be more specific with your CSS rule and that will help override the defaults.

    The form may be inheriting other theme styles that are causing differences. I didn't really look that closely at that.

    Also, a note here. You're using very generic style rules here that are ultimately going to cause you problems down the line. Not all inputs are created equal and I'm sure you're not expecting every radio button, checkbox and image button to all have the same margins as text inputs.

    You're better off to specify the input type in your rule to avoid these pitfalls.. ex.

    body #left .gform_wrapper input[type=text] {
         margin-left: 50px

    You can find out the proper way to target the form fields for CSS manipulation here..

    and here's a couple of good resources that discuss CSS specificity if you're not familiar with it

    Posted 10 years ago on Tuesday September 13, 2011 | Permalink