解决display:inline-block产生的间距

2019-06-14  本文已影响0人  门门_
看就是这样,对没错,是这样的,我以为我有问题,搞了半天,发现不是我的问题,是本身就是个问题,哈哈哈哈哈

然后说什么呢,为什么会出现??
好就说这个,我不晓得能不能说清除哈~。
inline-block水平呈现的元素之间,换行显示或者空格分隔的情况下会有间距,就像头上那个样子。

问题出现了,怎么解决?

一、margin负值
首先你肯定可以想到的办法是将margin设为负值,这样是可以的

注意下面蓝色的那一条
ul{
  list-style:none;
}
li{
  width:100px;
  height:100px;
  display:inline-block;
  margin:-3px; <!-- 看这里!!!-->
}
.one{
  background-color:red;
}
.two{
  background-color:orange;
}
.three{
  background-color:yellow;
}

二、移除空格
这方法出现的原因:标签段之间有空格,因此只要移除空格就可以消除间隙

解决一:

<a>                                        
</a><a>
</a><a>
</a>

解决二:

<a></a
><a></a
><a></a>

解决三:

<a></a><!--
--><a></a><!--
--><a></a>

形式很奇怪,但确实可以解决这个问题
三、标签不闭合
<a>                 或者         <a>
<a>                              <a>
<a></a>                          <a>

四、我不知道怎么叫它


上面提到了,有间隙是因为有空格,空格又属于字符,那么如果将字符的宽度设置为0,是否可以解决问题???
答案是可以的,但是由于我没有出现正确结果,这个方法以后再说吧
上一篇下一篇

猜你喜欢

热点阅读