如何解除文本输入框与提交按钮的边距关联？

问题根源在于行内元素的默认基线对齐规则，以及表单元素自带的默认样式，通过调整布局方式就能彻底解除这种边距关联，同时优化整体样式：

修改后的CSS代码 #

.banner {
  width: 100%;
  height: 100px;
  display: flex; /* 替换inline-flex，更适配块级容器布局 */
  align-items: center; /* 让内部元素垂直居中 */
  margin: 0;
  background-color: #1b2936;
}

.logo {
  width: 200px;
  height: 100px;
}

input[type=text] {
  background-color: #10151b;
  border: 5px solid #10151b;
  border-radius: 7px;
  height: 50px;
  width: 500px;
  color: white;
  font-family: jetbrainsRegular;
  margin: 0; /* 清除默认外边距 */
  padding: 0 10px; /* 可选：让输入文本不贴边框 */
}

.search {
  width: 50px;
  height: 50px;
}

.searchbtn {
  border: 5px solid #1fa2f3;
  border-radius: 30px;
  background-color: #1fa2f3;
  margin: 0 0 0 8px; /* 仅给按钮添加可控的左侧间距 */
  padding: 0; /* 清除按钮默认内边距 */
  cursor: pointer; /* 可选：添加鼠标指针样式 */
}

修改后的HTML代码 #

<div class="banner">
  <img class="logo" src="logo.png">
  <form action="query.php" style="display: flex; align-items: center; margin: 0;">
    <input type="text" id="query" placeholder="Mot">
    <button type="submit" class="searchbtn">
      <img src="search.png" class="search"/>
    </button>
  </form>
</div>

核心调整说明 #

• 将.banner的inline-flex改为flex，并添加align-items: center，确保logo与表单区域垂直对齐，避免布局错位。
• 给<form>设置display: flex和align-items: center，让输入框与按钮强制在同一行对齐，彻底消除行内元素基线对齐导致的间距关联。
• 清除输入框和按钮的默认内外边距，仅给按钮添加可控的左侧间距，避免边距相互干扰。
• 移除冗余的<label>包裹（若需保留label，可给其设置display: contents，避免额外间距影响）。

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