Bug—行内块元素的显示问题

最新推荐文章于 2022-10-06 13:08:32 发布

清辞-

最新推荐文章于 2022-10-06 13:08:32 发布

阅读量243

点赞数 2

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

本文链接：https://blog.csdn.net/hccccccccccccc/article/details/120709310

版权

HTML+CSS 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

Bug专栏

1 篇文章 0 订阅

订阅专栏

发现Bug

今天在做flex布局的时候，我在父元素中引入了四个行内元素span，想测试flex的相关属性，代码如下所示。我本来是想在box这个盒子中放四个span，因为按理说应该正好放下四个span,但实际效果却不是这样。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .box {
            width: 400px;
            height: 200px;
            background-color: yellow;
        }
        
        .item {
            width: 100px;
            height: 40px;
            background-color: red;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="item">1</span>
        <span class="item">2</span>
        <span class="item">3</span>
        <span class="item">4</span>

    </div>

</body>

</html>

在这里插入图片描述

分析Bug

经过查阅资料得知，出现空白间隙，导致最后一个span无法放在第一行。那么为什么会有这个空白间隙呢？到底是哪里来的呢？

出现空白间隙的原因是，元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决Bug

去除元素间的空白

通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行，可以去除元素间的空白，或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等，例如这么写：

<body>
    <div class="box">
        <span class="item">1</span><span class="item">2</span><span class="item">3</span><span class="item">4</span>
    </div>
</body>

父元素设置font-size为0，子元素单独设置font-size

        .box {
            width: 400px;
            height: 200px;
            background-color: yellow;
            font-size: 0;
        }
        
        .item {
            font-size: 15px;
            width: 100px;
            height: 40px;
            background-color: red;
            display: inline-block;
        }

设置margin-left为负值

用margin负值来抵掉元素间的空白，不过margin负值的大小与上下文的字体和文字大小相关，并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用，也相对比较麻烦，因此不太推荐使用。

给inline-block元素加float或者flex

让行内块元素浮动起来，或者给父盒子加上display: flex; 都可以解决空白间隙的问题，不过这样处理的三栏式布局也就没必要用inline-block啦。

设置字符间距或单词间距

这两个方法的原理有点像二所用的font-size，具体做法是给父元素一个letter-spacing或者word-spacing的负值，子元素再调整为0即可，具体使用字符间距还是单词间距其实大同小异。

        .box {
            width: 400px;
            height: 200px;
            background-color: yellow;
            letter-spacing: -0.5em;
            /* word-spacing: -0.5em; */
        }
        
        .item {
            letter-spacing: 0;
            /* word-spacing: 0 */
            width: 100px;
            height: 40px;
            background-color: red;
            display: inline-block;
        }

清辞-

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bug—行内块元素的显示问题

发现Bug今天在做flex布局的时候，我在父元素中引入了四个行内元素span，想测试flex的相关属性，代码如下所示。我本来是想在box这个盒子中放四个span，因为按理说应该正好放下四个span,但实际效果却不是这样。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
复制链接

扫一扫