React.js搜索栏Input与Button同高30px但显示大小不一致问题

问题根源是浏览器默认样式的差异，具体两点：

1. <input> 默认盒模型是 content-box，设置的height仅计算内容区域高度，加上1px边框后总高度变成32px；而你的按钮设置了border: 0，总高度就是30px，自然会出现高度差。
2. 部分浏览器会给<input>添加默认内边距，进一步撑开元素高度。

解决方案 #

直接通过以下几步统一样式：

• 统一所有表单元素的盒模型，让高度计算包含边框和内边距
• 清除浏览器默认的内边距、外边距
• 对齐按钮和输入框的边框样式，保证视觉统一

修改后的CSS/Sass代码 #

.searchBarContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100%;

  /* 统一子元素盒模型，清除默认边距 */
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  .searchBarInput {
    background-color: white;
    border: 1px solid rgb(199, 199, 199);
    border-right: 0;
    height: 30px;
    width: 80%;
    max-width: 600px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    /* 手动设置内边距，避免浏览器默认值干扰 */
    padding: 0 16px;

    &:focus {
      outline: none;
    }
  }

  .searchBtn {
    color: black;
    background-color: white;
    border: 1px solid rgb(199, 199, 199);
    border-left: 0; /* 和输入框的右侧无边框对应 */
    height: 30px;
    min-width: 40px;
    max-width: 40px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    /* 确保图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cancelSearchBtn {
    /* 给取消按钮也同步样式，避免后续出现同样问题 */
    box-sizing: border-box;
    padding: 0;
    margin: 0 8px;
    height: 30px;
    border: 1px solid rgb(199, 199, 199);
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
  }
}

关键说明 #

• box-sizing: border-box 是核心，它让你设置的height直接对应元素的总高度（包含边框、内边距），彻底解决计算偏差。
• 给按钮补上和输入框一致的边框（仅去掉左侧边框），既保证视觉统一，也避免边框缺失导致的高度差。
• 手动清除默认边距后，所有样式都由你控制，不会再被浏览器默认样式打乱。

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