去除inline-block元素间 间距的N种方法

inline-block是一个块状行盒,表现为一个行内元素,它既拥有了块状元素可以设置width和height的特性,又保留了行内元素不换行的特点。
应用了display:line-block属性的元素会生成一个块状盒,该块状盒随着周围内容流动,如同它是一个单独的行内盒子,其表现更像是一个被替换的元素。

真正意义上inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,上代码:

    
    
去除inline-block元素间 间距的N种方法_第1张图片

使用CSS更改非inline-block水平元素为inline-block水平也会有该问题:



去除inline-block元素间 间距的N种方法_第2张图片

以上情况是符合规范的应有表现,但这类间距有时会对我们的布局或兼容性产生影响,所以要想办法去掉它,以下示例几种方法~

1. 移除空格

元素间留白间距的出现原因即标签段间的空格,去掉空格间距自然没有了。
以下是几种写法:

    
    
    

三种写法都能达到去除缝隙的效果:

去除inline-block元素间 间距的N种方法_第3张图片

2. 使用margin负值

margin负值的大小与上下文字体和文字大小有关,由于外部环境的不确定性及最后一个元素多出的父margin值等问题,此方法不适合大规模使用。



    

3. 删掉闭合标签

HTML5中可以很任性:虽然这样很怪但确实有效。

    

4. 使用font-size:0



5. 使用letter-spacing



6. 使用word-spacing



参考资料
去除inline-block元素间间距的N种方法

你可能感兴趣的:(去除inline-block元素间 间距的N种方法)