解决inline和inline-block元素的默认间距问题

经常我们会碰到多个inline元素和inline-block元素同行展示时会出现间距问题,而我们已经处理了margin:0;和padding:0;如下:
这里写图片描述

这种默认间距也被称为元素留白间距,是我们在编辑器coding时对于inline或inline-block元素进行换行编写,元素进行留白引起,解决办法有以下四种:

  1. 方法一:把标签内容写在同一行
    此方法直接针对引起原因进行处理,所以当我们把代码写在同一行的时候,间距就可以消除,可是鉴于这样书写的代码可读性,不推荐使用。
  2. 方法二:父元素设置font-size:0
    此种方法给父元素设置了font-size:0之后必须给该元素设置font-size
  3. 方法三:给该元素float:left
    此种方法虽然可以实现取消间距,但是可能对布局产生影响,需要考虑布局
  4. 方法四:letter-spacing
    该方法兼容性良好,可以考虑使用。
    这里父元素需要设置letter-spacing属性的值为一个负值,具体值的大小看情况,但是我们可以无限写小,无妨碍,如letter-spacing:-1000px
    该元素需要设置letter-spacing:0
    这里写图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值