Extra space when input and button are next to each other

Question

I can't figure this out for the life of me. Why is there an extra pixel at the top of the button? Also why is there extra white space to the left of it? All I am trying to do is have the input and the button next to each other looking connected.

Is this possible?

html{
  background: green;
}
form {
  height: 40px;

  input {
    height: 30px;
    width: 75%;
    max-width: 400px;
    padding: 5px 10px;
    font-size: 16px;
    border: 0;
    background: gray;
  }

  button {
    background: #6699FF;
    height: 40px;
    width: 60px;
    background-image: url('https://i.imgur.com/Tp7TTNO.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-origin: content-box;
    padding: 7px;
    border: 0;
    color: transparent;
  }
}

<form>
  <input type="text" name="Term" class="saearch-input" placeholder="Search more than 3800 summaries">
  <button type="submit" class="">Search</button>
</form>

If you can't explain it either but know how I can achieve this another way, I'll accept it as an answer as well.

https://stackoverflow.com/questions/7641678/use-css-to-remove-the-space-between-images — Temani Afif, Jan 26 '18 at 21:41
the upper links doesn't deal with input tag but it's the same issue and the fixes will all work here — Temani Afif, Jan 26 '18 at 21:42

score 4 · Accepted Answer · answered Jan 26 '18 at 20:33

4

The space is there because a line jump (return) is considered a white space. To avoid this you can:

Put the input and button tags right next to each other (harder to read your code)
Use the "comment hack" where you'd write your code with a  right before the <button>.
Use display: flex on your form to avoid the whitespace being rendered.

For your button positioning issue, it's related to the alignment on the baseline. vertical-align: bottom; on your button will fix this.

See the solution on this Fiddle

answered Jan 26 '18 at 20:33

chriskirknielsen

2,560
2
9
19

1

You sir, just saved me from going bald. Thank you. I actually knew about the character return problem, but completely all forgot about it. Thanks again! – Bagzli Jan 26 '18 at 20:39
@Bojan Happy to help! I've lost count how many times I've run into this kind of situation before. If you don't mind marking the answer as accepted, people who run into this later on can easily find the solution. ;) – chriskirknielsen Jan 26 '18 at 21:16

score -2 · Answer 2 · answered Jan 26 '18 at 20:35

You need to change the position of the button:

position: absolute;
top : 8px;

This is the complete css code:

html{
background: green;
}
form {
  height: 40px;

  input {
    height: 30px;
    width: 75%;
    max-width: 400px;
    padding: 5px 10px;
    font-size: 16px;
    border: 0;
    background: gray;
  }

  button {
    position: absolute;
    top : 8px;
    background: #6699FF;
    height: 40px;
    width: 60px;
    background-image: url('https://i.imgur.com/Tp7TTNO.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-origin: content-box;
    padding: 7px;
    border: 0;
    color: transparent;
  }
}

This is a hacky solution and won't work if OP changes the height of his elements. — chriskirknielsen, Jan 26 '18 at 21:19

Extra space when input and button are next to each other

2 Answers2