前端小知识点——按钮之间出现很小的空隙如何规避
文章介绍
本文主要介绍页面中两个按钮相邻时会出现一点空隙，导致在后续自定义填充的时候出现换行或其它问题，特此记录。
问题再现
这个图片能看到我们给外面的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布局是重点，浮动已经渐渐淘汰了。
原文地址：https://blog.csdn.net/weixin_48588897/article/details/140560270
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！