如何防止HTML和CSS中按钮导致搜索栏下移

我正在创建一个Header，左侧是Logo，右侧包含搜索栏和搜索按钮。添加Logo和搜索栏后一切正常，但加入按钮后，搜索栏略微下移并超出Header范围，按钮也向上偏移出视口。

我的HTML代码 #

<body>
  <header>
    <div class="container">
      <div class="logo">
        <img src="/Images/logo v2.png" alt="Solo Scriptura Logo"/>
      </div>
      <div class="search-set">
        <form id="s-bar-holder" role="search">
          <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
          <button class="find">
            <img src="/Images/Vector/icons/search-svgrepo-com.svg" />
          </button>
        </form>
      </div>
    </div>
  </header>
  <main></main>
</body>

我的CSS代码 #

body {
    max-width: 5000px;
    min-width: 500px;
}
header {
    display:flex;
    background-color: rgb(78,78,78);
    margin-top: -8px;
    margin-left: -7px;
    margin-right: -8px;
    height: 60px;
    width: auto;
     
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#search-bar {
    background-color: rgb(78,78,78);
    color: rgb(0,0,0);
    outline: none;
    height: 58px;
    width: 200px;
    font-size: 18px;
    border-left: 2px solid rgb(86,86,86);
    border-right: none;
    border-top: none;
    border-bottom: none;
    cursor: auto;
}
button {
    border: none;
    background-color: rgb(78,78,78);
}
button > img{
    height: 58px;
    width: 55px;
    overflow: hidden;
}

问题原因 #

1. 表单元素（input、button）默认带有外边距/内边距，浏览器默认的vertical-align属性会导致元素错位
2. Logo设置了align-self: flex-start，破坏了容器的垂直居中对齐逻辑
3. 未设置box-sizing: border-box，元素边框会额外占用空间，导致超出Header范围

修复方案 #

1. 重置表单元素默认样式

添加全局表单样式重置，消除浏览器自带的间距：

form, input, button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 调整Logo对齐方式

移除.logo的align-self: flex-start，让它和其他元素保持垂直居中：

.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  /* 去掉 align-self: flex-start */
}

3. 统一搜索栏和按钮的垂直对齐

给input和button设置垂直对齐属性，确保在同一水平线：

#search-bar, button {
  vertical-align: middle;
}

4. 优化按钮内图片样式

移除图片的overflow: hidden，添加object-fit保证图片比例：

button > img{
    height: 58px;
    width: 55px;
    object-fit: contain;
}

5. 规范Header边距处理（可选）

用body { margin: 0; }替代Header的负边距，更符合标准：

body {
    max-width: 5000px;
    min-width: 500px;
    margin: 0;
}
header {
    display:flex;
    background-color: rgb(78,78,78);
    height: 60px;
    width: 100%;
}

完整修复后的CSS代码 #

body {
    max-width: 5000px;
    min-width: 500px;
    margin: 0;
}
header {
    display:flex;
    background-color: rgb(78,78,78);
    height: 60px;
    width: 100%;
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px; /* 可选，避免内容贴边 */
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
form, input, button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#search-bar {
    background-color: rgb(78,78,78);
    color: rgb(0,0,0);
    outline: none;
    height: 58px;
    width: 200px;
    font-size: 18px;
    border-left: 2px solid rgb(86,86,86);
    border-right: none;
    border-top: none;
    border-bottom: none;
    cursor: auto;
    vertical-align: middle;
}
button {
    border: none;
    background-color: rgb(78,78,78);
    vertical-align: middle;
    cursor: pointer; /* 新增，提升交互体验 */
}
button > img{
    height: 58px;
    width: 55px;
    object-fit: contain;
}

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