前端小知识点——按钮之间出现很小的空隙如何规避

文章介绍

   本文主要介绍页面中两个按钮相邻时会出现一点空隙，导致在后续自定义填充的时候出现换行或其它问题，特此记录。

问题再现

   这个图片能看到我们给外面的div设置的是300的宽度，按钮设置的150的宽度，正常情况下应该是一行的，但是按钮却换行了，也没有什么margin和padding操作，这是为什么？

   其实这个问题是一个常见的问题，只要是行内元素都会存在两个元素中间有几px的空隙，而这几px实际上是我们在写代码的时候习惯换行，HTML会将这个换行也识别为一个元素导致多了一点空隙，如果你将两个button按钮不换行就没有这个问题了。但是因为我们肯定会有一些margin和padding操作，所以解决不了实际问题，必须使用css解决。

   在之前的版本中，一般使用浮动解决，但是这种方法已经过时了，而且不好维度，常常在加一个按钮或者去掉一个按钮的时候需要修改样式，所以目前最好的解决方式是flex布局，兼容性很高，只要不是IE10以下，基本各个浏览器都可以兼容。

   这里为了更好的兼容，在外部div使用flex布局的时候多写几行，如下。

     display: flex;
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flex;

   养成一个好习惯，这种css针对各个浏览器都写一下，代码的健壮性更好。

总结

   项目中遇到了这么一个问题记录一下，无论是普通按钮还是组件的按钮都可能存在这种问题，切记，现在的flex布局是重点，浮动已经渐渐淘汰了。