行内块 行内元素缝隙问题

前言：我比较用喜欢行内元素，行内块元素来做横向导航，这样就不用再去担心浮动块级元素带来的不必要影响。但行内元素，行内块元素元素有个硬伤--有默认的间隙

一、行内标签元素出现问题

 

    
    行内元素
    行内元素
    行内元素

页面显示结果

这时就会发现出现，标签之间出现了间隙。

 

二、行内块标签元素出现问题
行内块标签元素出现的比较多的是在表单元素了。

    
    行内块元素
    行内块元素
    行内块元素

页面显示结果

同样的，行内块标签之间也出现了间隙。

 

三、解决方案
会出现间隙的原因，其实是行内标签元素，行内块元素之间的换行带来的影响。只要解决了换行的问题，也就解决了间隙的问题。

①、方案一

    
    
    行内元素行内元素行内元素

页面显示结果

这个时候就没有间隙了。

 

②、方案二

    
    行内元素行内元素行内元素

页面显示结果

③、方案三

  
      
    
    行内元素
    行内元素
    行内元素  
  

页面显示结果

 

④、方案四

  
  
    行内元素
    行内元素
    行内元素 
  

页面显示结果

tip：以上四种方案兼容所有常规浏览器。

 

⑤、方案五（把父级font-size设置为0）

  
  
    行内元素
    行内元素
    行内元素  
  

页面显示结果

tip：方案四在IE7,及IE7下还是会出现间隙。在safari浏览器下也会出现间隙。

 

行内块处理方式相同
--------------------- 
作者：穆弘 
来源：CSDN 
原文：https://blog.csdn.net/w390058785/article/details/80097061 
版权声明：本文为博主原创文章，转载请附上博文链接！