Unexplained gap between boxes in a form

Question

I have a simple form at http://jsfiddle.net/np8ty/ and can't see any reason for the gap separating the red and beige boxes.

<form action="" method="POST" id="checkout_form">
     <input type="text" size="20"   class="cc-number"  placeholder="Card number"/>
     <input type="text" class="cc-exp"  placeholder="MM/YY"  /> 
     <input type="text" class="cc-cvc"  placeholder="CVC"  />           
     <button type="submit" class="submit">Submit</button>
</form>

Just remove the whitespace in the markup. [updated example](http://jsfiddle.net/xYnMA/) .. Also, see this question: http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements — Josh Crozier, Apr 26 '14 at 02:57

score 0 · Answer 1 · answered Apr 26 '14 at 03:16

0

Try adding margin-left to your css like this:

#checkout_form input.cc-cvc{
    width: 109px;
    background-color: beige;
    margin-left: -4px;
}

answered Apr 26 '14 at 03:16

MISJHA

998
4
12

score 0 · Answer 2 · answered Apr 26 '14 at 03:23

0

Yes removing the space will do the work. You may also use float left for both of the inputs.

answered Apr 26 '14 at 03:23

Kunjan Thadani

1,660
3
18
26

Unexplained gap between boxes in a form

2 Answers2