Reducing Foundation's row spacing

StackOverflow https://stackoverflow.com//questions/21014178

  •  21-12-2019
  •  | 
  •  

سؤال

I am using Found 4.04. I have a text box inside a form and I am trying to place some text right beneath the text box. However, there is a bit more space than I would like and I want to cut it down. I tried tweaking the margin, padding, etc. using Firebug and nothing has worked.

Is there a way to reduce the vertical space between the text boxes and their corresponding placement text? i.e., "Small text goes here" will move up closer to the text box.

Here is the JSFiddle link (you will have to shrink the code panel so you can see the boxes side by side): http://jsfiddle.net/R95JL/

 <html>
 <head><meta charset="utf-8">
 <meta content="width=device-width" name="viewport">
 <link href="http://cdn.jsdelivr.net/foundation/4.0.4/css/foundation.min.css" rel="stylesheet">
 </head>

 <body>
 <h4> Test form </h4>
 <br> <br>
 <div class="container">
    <div class="row">
        <form enctype="application/x-www-form-urlencoded" action="" method="post">
            <div class="large-3 columns"> Text </div>
            <div class="large-2 columns"><input type="number" value="" required="" name="f2" id="myid1"></div>
            <div class="large-2 large-offset-1 columns end"><input type="number" value="" required="" name="f3" id="myid2"></div>
        </form>
    </div>

    <div class="row"> 
        <div class="large-offset-3 large-2 columns"><small> Small text goes here </small> </div>
        <div class="large-2 large-offset-1 columns end"><small> Small text goes here </small> </div>
    </div>
 </div>
 </body>
 </html>
هل كانت مفيدة؟

المحلول

Your solution is unlikely a simple hack :

#myid2 {
    margin-bottom:0px;
}

working demo

Also note that your form is float'ed....so you'll have to use

.clr{ clear:both; }

and unlike the other answers, using input {margin:0px !important;} is not recommended as this will affect all the input fields and the form layout too... see what i mean!!

نصائح أخرى

Just remove the margin from the input boxes in your CSS.

 input { margin:0px !important;  }

your input is having default margin. Use this rule in css:

input {margin:0px !important;}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top