行内元素、行内块元素空白问题

最新推荐文章于 2024-07-26 11:48:42 发布

圆周率v1.1

最新推荐文章于 2024-07-26 11:48:42 发布

阅读量117

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_44224712/article/details/131954813

版权

1.元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        span {
            background-color: gainsboro;
        }
    </style>
</head>
<body>
    <div>
        <span>item1</span>
        <span>item2</span>
        <span>item3</span>
        <span>item4</span>
        <span>item5</span>
        <span>item6</span>
    </div>
</body>
</html>

解决方案：

方案一：去掉换行和空格（不推荐）。

<body>
    <div>
        <span>item1</span><span>item2</span><span>item3</span><span>item4</span><span>item5</span><span>item6</span>
    </div>
</body>

方案二：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .father {
            font-size: 0;
        }
        span {
            background-color: gainsboro;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <span>item1</span>
        <span>item2</span>
        <span>item3</span>
        <span>item4</span>
        <span>item5</span>
        <span>item6</span>
    </div>
</body>
</html>

2.行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

比如图标下方会有空白，代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .father {
            background-color: gray;
        }
        img {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <span>test</span>
        <img src="../assets/img/add.png" alt="" srcset="">
    </div>
</body>
</html>

解决方案：

方案一：给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、 top 均可。

img {
            width: 100px;
            vertical-align: bottom;
        }

方案二：若父元素中只有一张图片，设置图片为 display:block 。

方案三：给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size

圆周率v1.1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
行内元素、行内块元素空白问题

方案一：给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、 top 均可。方案三：给父元素设置 font-size: 0。方案二：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。方案二：若父元素中只有一张图片，设置图片为 display:block。行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
复制链接

扫一扫