记录:两个display: inline-block;内联块元素之间的空隙问题

  • Post author:
  • Post category:其他





举例:inline-block之间存在空隙
<!--html:-->
<div class="example">
	<span>inline-block之间存在空隙</span>
	<span>inline-block之间存在空隙</span>
</div>
/*css:*/
.example span {
	display: inline-block;
	background: #ccc;
}

之间存在空隙



问题:出现空隙的原因是元素之间的空格存在

解决1:

inline-block

元素不换行

<div class="example">
	<span>inline-block之间存在空隙</span><span>inline-block之间存在空隙</span> <!--不换行-->
</div>

解决2:

inline-block

元素标签不闭合

<div class="example">
	<span>inline-block之间存在空隙
	<span>inline-block之间存在空隙
</div>


注意:如果有ie兼容需求:最后一个元素标签要闭合 如下

<div class="example">
	<span>inline-block之间存在空隙
	<span>inline-block之间存在空隙</span>
</div>

解决3:

inline-block

元素标签之间使用注释

<div class="example">
	<span>inline-block之间存在空隙</span><!--
	--><span>inline-block之间存在空隙</span>
</div>

解决4:

inline-block

元素父级设置

font-size: 0;



inline-block

元素内设置字体大小

.example {
	font-size: 0;
}
.example span {
	display: inline-block;
	background: #ccc;
	font-size: 16px;
}


注意: 兼容chrome,取消chrome最小字体大小限制

.example {
	font-size: 0;
	-webkit-text-size-adjust:none;
}
.example span {
	display: inline-block;
	background: #ccc;
	font-size: 16px;
}

参考文章地址:

https://www.cnblogs.com/bigboyLin/p/4624805.html