如何修复Input与Button的1px对齐错位问题？

问题根源 #

你碰到的对齐问题主要来自这几个细节：

• 浏览器默认的box-sizing为content-box，设置的height仅计算内容高度，边框会额外占用空间，导致实际总高度不一致
• input和button的默认样式存在差异，比如边框宽度、内边距的默认值不同
• 行内元素默认采用基线对齐，会让两个元素产生微小的垂直偏移

具体修复方案 #

方案1：统一盒模型与基础样式（直接解决）

给input和button统一设置盒模型、边框样式、内边距和垂直对齐方式，确保视觉上完全一致：

input, button {
  box-sizing: border-box; /* 让height包含边框和内边距，避免额外高度 */
  height: 30px;
  vertical-align: middle; /* 对齐垂直中线，消除基线偏移 */
  padding: 0 8px; /* 统一内边距，避免内容错位 */
  border: 1px solid #D9D9D9; /* 统一边框宽度和颜色 */
}

input {
  border-radius: 10px 0 0 10px;
  border-right: none;
}

button {
  border-radius: 0 10px 10px 0;
}

.bg-grey {
  background: lightgrey;
}

同时移除HTML中的内联样式，避免样式冲突：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<input class="addFont bg-grey" placeholder="What is your mood?"/>
<button class="bg-grey"><i class="fa fa-search"></i></button>

方案2：使用Flex布局（更简洁省心）

把输入框和按钮放在一个容器内，利用Flex布局自动实现完美对齐：

.search-container {
  display: flex;
}

.search-container input {
  border-radius: 10px 0 0 10px;
  border-right: none;
  border: 1px solid #D9D9D9;
  padding: 0 8px;
}

.search-container button {
  border-radius: 0 10px 10px 0;
  border: 1px solid #D9D9D9;
  padding: 0 8px;
}

.bg-grey {
  background: lightgrey;
}

调整HTML结构：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<div class="search-container">
  <input class="addFont bg-grey" placeholder="What is your mood?"/>
  <button class="bg-grey"><i class="fa fa-search"></i></button>
</div>

Flex布局会自动让子元素高度一致，无需手动设置height，后续调整也更灵活。

关键注意事项 #

• 避免混用内联样式和外部CSS，防止样式优先级冲突
• 确保两个元素的边框宽度、颜色完全统一，消除视觉差异
• 用vertical-align: middle或Flex布局解决行内元素的垂直偏移问题

内容的提问来源于stack exchange，提问作者someRandomAlt