Question

我无法解决这个问题。为什么按钮顶部有一个额外的像素？另外为什么左边有额外的空白区？我所要做的就是让输入和彼此相邻的按钮看起来相连。

这可能吗？

＆＃13;

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

＆＃13;

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

＆＃13;

如果你不能解释它，但知道如何以另一种方式实现，我也会接受它作为答案。

Answer 1

空间在那里因为线跳（返回）被认为是空白区域。为避免这种情况，你可以：

将input和button标签放在彼此旁边（更难阅读您的代码）
使用＆＃34;评论黑客＆＃34;在之后用<button>编写代码的地方。
在表单上使用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;
  }
}

输入和按钮彼此相邻时的额外空间

2 个答案: