行内块行内元素缝隙问题

最新推荐文章于 2025-03-16 10:33:14 发布

unstorm

最新推荐文章于 2025-03-16 10:33:14 发布

阅读量10w+

点赞数 4

分类专栏：日常问题文章标签：行内块元素 html css 行内元素

日常问题专栏收录该内容

10 篇文章

订阅专栏

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

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

<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>

页面显示结果

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

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

①、方案一

<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>

页面显示结果

③、方案三

<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浏览器下也会出现间隙。

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