CSS 之inline/inline-block 元素间距问题

把元素的display属性值设置为inline或者inline-block,在该类元素连续出现的时候,你会发现每个元素之间会存在一些空隙。如下图:

inline情况下.png

CSS 之inline/inline-block 元素间距问题_第1张图片
inline-block情况下.png

贴上代码:




    
    Document



这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字

导致这个问题的原因是:在HTML代码里,空格也会占位。class为wrap的元素继承了body font-size:18px的这个属性值。在非0的font-size值的情况下,间隙就会形成。解决该问题的方法有二:

  • 压缩HTML,把所有空格去掉
  • 为class为wrap的元素设置font-size :0 (但需要把其子元素的该属性重写成正常值)

贴上代码:

 
    
        
            
            Document
            
        
        
            
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字
这是一些文字

你可能感兴趣的:(CSS 之inline/inline-block 元素间距问题)