input和button之间的缝隙问题与高度对齐问题

发现问题

在开发页面搜索框的时候可以发现 input 和 button 之间存在一道缝隙，且高度不能对齐这两个问题。

点击查看 HTML 代码

<div class="search">
  <input type="text" />
  <button>搜索</button>
</div>

点击查看 CSS

* {
  margin: 0px;
  padding: 0px;
}
.search {
  width: 300px;
  padding: 10px;
  margin:  0 auto;
  margin-top: 50px;
  border: 2px solid green;
}
input {
  width: 200px;
  height: 50px;
  border: 1px solid red;
}
button {
  height: 50px;
  padding: 0 20px;
  border: 1px solid blue;
}

解决问题

缝隙问题

缝隙问题是由于标签之间的换行，产生空白字符导致的

解决方法一：不换行

直接把 input 输入框和 button 按钮写为一行，实现效果：

点击查看 HTML 代码

<div class="search">
  <!-- 直接写作一行 -->
  <input type="text" /><button>搜索</button>
</div>

解决方法二：font-size:0px;

给父元素添加 font-size:0px; 属性，也可以实现效果

点击查看 HTML 代码

<div class="search">
  <!-- 依然维持换行状态 -->
  <input type="text" />
  <button>搜索</button>
</div>

点击查看 CSS 代码

* {
  margin: 0px;
  padding: 0px;
}
.search {
  width: 300px;
  padding: 10px;
  margin:  0 auto;
  margin-top: 50px;
  border: 2px solid green;
  /* 主要修改行 */
  font-size: 0;
}
input {
  width: 200px;
  height: 50px;
  border: 1px solid red;
}
button {
  height: 50px;
  padding: 0 20px;
  border: 1px solid blue;
}

解决方法三：float:left;

给 input 设置浮动，相邻的盒子自动贴边，同样可以实现效果

点击查看 HTML 代码

<div class="search">
  <input type="text" />
  <!-- HTML 代码维持原样 -->
  <button>搜索</button>
</div>

点击查看 CSS 代码

* {
  margin: 0px;
  padding: 0px;
}
.search {
  width: 300px;
  padding: 10px;
  margin:  0 auto;
  margin-top: 50px;
  border: 2px solid green;
}
input {
  width: 200px;
  height: 50px;
  border: 1px solid red;
  /* 主要修改行 */
  float: left;
}
button {
  height: 50px;
  padding: 0 20px;
  border: 1px solid blue;
}

解决方法四：position / transform

通过 position / transform 进行移动也是可以实现对齐的，但是不推荐

点击查看 HTML 代码

<div class="search">
  <input type="text" />
  <!-- HTML 代码维持原样 -->
  <button>搜索</button>
</div>

点击查看 CSS 代码

* {
  margin: 0px;
  padding: 0px;
}
.search {
  width: 300px;
  padding: 10px;
  margin:  0 auto;
  margin-top: 50px;
  border: 2px solid green;
}
input {
  width: 200px;
  height: 50px;
  border: 1px solid red;
  /* float: left; */
}
button {
  height: 50px;
  padding: 0 20px;
  border: 1px solid blue;
  /* 主要修改位置 */
  position: relative;
  left: -5px;
  /* transform: translateX(-5px); */
}

高度问题

使用调试工具查看可以发现：button 的总高度是设置的高度
在计算样式中查看 button 的 box-sizing，会发现结果为：border-box
即：padding 和 border 算在 width 和 height 中
而Chrome浏览器的 box-sizing 默认是 content-box
即：padding 和 border 是不算在 width 和 height 中的

问题的产生原因：
button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部（button的高度包含边框的高度，而文本框text则不包含边框高度。）

解决方法一：input 设置为 border-box

input {
  box-sizing: border-box;
}

解决方法二：button 设置为 content-box

button {
  box-sizing: content-box;
}

解决方法三：button 的高度增加 2px，或 input 减少

在修改高度后会发现依然不是很对齐
给 input 设置对齐 即可解决

点击查看 HTML 代码

<div class="search">
  <input type="text" />
  <!-- HTML 代码维持原样 -->
  <button>搜索</button>
</div>

点击查看 CSS 代码

* {
  margin: 0px;
  padding: 0px;
}
.search {
  width: 300px;
  padding: 10px;
  margin:  0 auto;
  margin-top: 50px;
  border: 2px solid green;
  /* 去除空隙 */
  font-size: 0;
}
input {
  width: 200px;
  height: 50px;
  border: 1px solid red;
  /* 2.设置对齐 */
  vertical-align: 0.8px;
}
button {
  /* 1.增加 2px */
  height: 52px;
  padding: 0 20px;
  border: 1px solid blue;
}