Extra space when input and button are next to each other [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
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.

Answer 1

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 after the <input> and --> 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

Answer 2

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;
}
}