<分区>
<分区>
我这辈子都想不通。为什么按钮顶部有一个额外的像素？另外为什么它的左边有额外的空白？我想要做的就是让输入和按钮看起来彼此相连。
这可能吗？
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>如果您也无法解释，但知道我如何通过其他方式实现这一点，我也会接受它作为答案。
最佳答案
空格在那里是因为跳行(返回)被认为是空白。为避免这种情况，您可以:
input和 button标签彼此紧挨着(更难阅读您的代码)<!-- 编写代码在 <input> 之后和 -->就在 <button> 之前.display: flex在您的表单上以避免呈现空白。对于您的按钮定位问题，它与基线对齐有关。 vertical-align: bottom;在你的按钮上将解决这个问题。
关于html - 输入和按钮彼此相邻时的额外空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48469074/