Input与Button未设置外边距但元素间仍存在间距的技术咨询

这个问题我之前也碰到过！根源其实不是margin的问题，而是inline/inline-block元素之间的空白字符在搞鬼——你HTML里input和button之间的换行/空格，浏览器会把它渲染成一个空格，哪怕你把margin设成0也没用。

给你几个靠谱的解决方案，挑适合你的来用：

方案1：去掉HTML中的空白字符 #

最简单的办法就是把input和button紧挨着写，删掉它们之间的空格或换行：

<form id="formBox">
  <input type="search" name="search" id="searchBox"><button type="submit" id="searchButton">OK</button>
</form>

或者也可以用注释消除空白（适合需要保持代码换行可读性的场景）：

<form id="formBox">
  <input type="search" name="search" id="searchBox"><!--
  --><button type="submit" id="searchButton">OK</button>
</form>

方案2：给父元素设置font-size: 0 #

空白字符本质是文本，把父元素的字体大小设为0，空白就消失了，记得给子元素重新设置字体大小避免继承：

#formBox {
  font-size: 0; /* 消除空白字符的渲染 */
}
#searchButton {
  height: 2em;
  width: 2.4em;
  color: #fff;
  background-color: #71b066;
  border: 0;
  margin-left: 0px !important;
  margin-right: 0px !important;
  font-size: 1.2em; /* 重新设置按钮字体大小 */
  cursor: pointer;
}
#searchBox {
  height: 2em;
  width: 15em;
  margin-right: 0px !important;
  font-size: 1.2em; /* 重新设置输入框字体大小 */
  padding-left: 1em;
  border: 1px #dbdada solid !important;
  background-color: #e5e3e3;
  margin-left: 0px !important;
}

方案3：使用Flexbox布局（推荐） #

现代布局方式，不仅能彻底消除空白，还能轻松实现元素对齐，兼容性也覆盖绝大多数主流浏览器：

#formBox {
  display: flex; /* 启用Flex布局 */
}
#searchButton {
  height: 2em;
  width: 2.4em;
  color: #fff;
  background-color: #71b066;
  border: 0;
  font-size: 1.2em;
  cursor: pointer;
  /* 这里可以去掉margin的!important，Flex布局下不需要额外控制外边距 */
}
#searchBox {
  height: 2em;
  width: 15em;
  font-size: 1.2em;
  padding-left: 1em;
  border: 1px #dbdada solid !important;
  background-color: #e5e3e3;
  /* 同样可以去掉margin的!important */
}

Flex布局下，子元素会自动填充容器空间，不会产生额外空白，还能通过align-items等属性调整垂直对齐，非常灵活。

方案4：负margin（不推荐） #

如果上面的方法都不想用，也可以给button加负的margin-left来抵消空白，但这个方法依赖浏览器的字体默认大小，不同环境可能需要微调数值，稳定性较差：

#searchButton {
  /* 其他样式不变 */
  margin-left: -4px; /* 数值根据实际情况微调 */
}

试试上面的方法，应该就能解决你的间隙问题啦！

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