HTML 多个span标签折行存在空白

最新推荐文章于 2022-07-12 19:41:32 发布

ITB业生

最新推荐文章于 2022-07-12 19:41:32 发布

阅读量769

点赞数

分类专栏： HTML 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_19394437/article/details/108570395

版权

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

问题：

HTML中在使用多个span标签时，如果编写是折行编写，则会显示时会存在空白（为了更好的查看到效果，针对3个span元素设置了1px 的边框宽度），如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决多个span标签留白问题</title>
    <style>
        span{
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>2</span>
    </p>
</body>
</html>

结果：

初始想法：

初始想法，应该是span标签存在内外边距，但是针对span标签的内外边距设置后，发现问题还是如此。通过浏览器观察span标签不存在内外边距。

解决方法：

（1）【浮动】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决多个span标签留白问题</title>
    
    <!-- 方法1：浮动  -->
    <style>
        p{
            overflow: hidden;
        }
        span{
            border: solid 1px red;
            float: left;
        }
    </style>

</head>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>2</span>
    </p>
</body>
</html>

（2）【父元素设置font-size:0，span元素设置：font-size:xxpx】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决多个span标签留白问题</title>
    <style>
        p{
            font-size: 0;
        }
        span{
            border: solid 1px red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>2</span>
    </p>
</body>
</html>

（3）【写在一行】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决多个span标签留白问题</title>
    <style>
        span{
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <p>
        <span>1</span><span>2</span><span>2</span>
    </p>
</body>
</html>

以上3中方法均能实现：清除 span 标签中间存在的留白问题，效果如下：

如果以上提供的方法对您有帮助，请为小编点个赞，如果各位大神，还有其他的方法，请不吝赐教。

ITB业生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 多个span标签折行存在空白

问题： HTML中在使用多个span标签时，如果编写是折行编写，则会显示时会存在空白（为了更好的查看到效果，针对3个span元素设置了1px 的边框宽度），如下图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫

专栏目录