font-size=0的妙用,解决div塌陷

布局 专栏收录该内容
24 篇文章 0 订阅

今天写轮播图的时候发现,在设置图片宽度时,第二张图片会塌陷到下面去,其实是出于排版的原因两个div之间留下了空白字符,才导致两个div元素之间留有间距,导致图片塌陷。

另外,display:inline-block的元素之间会有一个字符的间隙,这个间隙导致了最后一个会掉下来。



解决方法:

1、给父元素设置font-size : 0 p x;--------推荐
2、取消掉换行符,如这样:<span>a</span><span> a</span>< span>a</span>连续。

或者

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

3、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。




虽然不换行可以暂时解决这一问题,但是肯定有更好的方法。在父类中设置font-size:0就可以完美地解决这个空白间距问题。 


  • 1
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值