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

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

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

<body>
	<style>
		span { background:red; }
	</style>
	<span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
</body>

页面显示结果

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

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

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

<body>
	<style>
		button { background:red; border:none; }
	</style>
	<button>行内块元素</button>
    <button>行内块元素</button>
    <button>行内块元素</button>
</body>

页面显示结果

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

三、解决方案

扫描二维码关注公众号，回复： 952912 查看本文章

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

①、方案一

<body>
	<body>
	<style>
		span { background:red; }
	</style>
	<span>行内元素</span><span>行内元素</span><span>行内元素</span>
</body>

页面显示结果

这个时候就没有间隙了。

②、方案二

<body>
	<body>
	<style>
		span { background:red; }
	</style>
	<span>行内元素</span
    ><span>行内元素</span
    ><span>行内元素</span>
</body>

页面显示结果

③、方案三

<body>  
    <style>  
        span { background:red; }  
    </style>  
    <span>
    行内元素</span><span>
    行内元素</span><span>
    行内元素</span>  
</body>

页面显示结果

④、方案四

<style> 
    span { background:red; font-size:16px;}  
</style>  
<body>  
	<span>行内元素
    <span>行内元素
    <span>行内元素 
</body>

页面显示结果

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

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

<style> 
	body { font-size:0; } 
    span { background:red; font-size:16px;}  
</style>  
<body>  
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>  
</body>

页面显示结果

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

行内块处理方式相同

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

猜你喜欢