【css】行内元素、行内块元素的默认间隙问题

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

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


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

页面显示结果

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

 

二、行内块标签元素出现问题

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


    
    
    
    

页面显示结果

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

 

三、解决方案

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

①、方案一


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

页面显示结果

这个时候就没有间隙了。

 

②、方案二


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

页面显示结果

 

③、方案三

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

页面显示结果

 

④、方案四

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

页面显示结果

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

 

⑤、方案五(把父级font-size设置为0)

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

页面显示结果

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

 

行内块处理方式相同

你可能感兴趣的:(css)