输入和按钮彼此相邻时的额外空间[重复]

Question

我这辈子都想不通。为什么按钮顶部有一个额外的像素？另外为什么它的左边有额外的空白？我要做的就是让输入和彼此相邻的按钮看起来相连。

这可能吗？

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>

如果您也无法解释，但知道我如何以另一种方式实现这一目标，我也会接受它作为答案。

Answer 1

有空格是因为跳行（返回）被认为是一个空格。为避免这种情况，您可以：

1. 将input 和button 标签并排放置（更难阅读您的代码）
2. 使用“comment hack”，在 <!-- 之后编写代码，<input> 和 --> 就在 <button> 之前。
3. 在表单上使用display: flex 以避免呈现空白。

对于您的按钮定位问题，它与基线对齐有关。按钮上的vertical-align: bottom; 将解决此问题。

See the solution on this Fiddle

Answer 2

你需要改变按钮的位置：

position: absolute;
top : 8px;

这是完整的css代码：

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