前端小知识点——按钮之间出现很小的空隙如何规避
- 文章介绍
- 问题再现
- 总结
文章介绍
本文主要介绍页面中两个按钮相邻时会出现一点空隙
,导致在后续自定义填充的时候出现换行或其它问题,特此记录。
问题再现
这个图片能看到我们给外面的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布局是重点
,浮动已经渐渐淘汰了
。