相邻的两个inline-block节点出现间隔的原因以及解决方法

最新推荐文章于 2022-03-28 19:00:00 发布

limingxiaojie

最新推荐文章于 2022-03-28 19:00:00 发布

阅读量3.8k

点赞数 6

本文链接：https://blog.csdn.net/limingxiaojie/article/details/96989561

版权

产生间隔的原因：

元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

<style>
        .baba {
            display: inline-block;
            width: 200px;
            height: 100px;
            background: green;
            display: table-cell;
            vertical-align: middle; 
            text-align: center;
            
        }
        .son {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: #dcdcdc;
            
        }
    </style>
</head>
<body>
    
    <span class="baba">
        <span class="son"></span>
        <span class="son"></span>
        <span class="son"></span>
    </span>
</body>

如图所示

解决方案：

方法1: font-size

方法2：改变书写方式

方法3：使用margin负值

方法4：使用word-spacing或letter-spacing

解决方法一：给父级元素设置font-size： 0；子元素设置相应的font-size

<style>
        .baba {
            display: inline-block;
            width: 200px;
            height: 100px;
            background: green;
            display: table-cell;
            vertical-align: middle; 
            text-align: center;
            font-size: 0px;
        }
        .son {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: #dcdcdc;
            font-size: 14px;
        }
    </style>
</head>
<body>
    
    <span class="baba">
        <span class="son"></span>
        <span class="son"></span>
        <span class="son"></span>
    </span>
</body>

效果：

解决方法二：改变书写方式，元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了

<body>
    
    <span class="baba">
        <span class="son"></span><span class="son"></span><span class="son"></span>
    </span>
</body>

解决方法三：margin负值

margin负值的大小与上下文的字体和文字大小相关，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

解决方法四：设置父元素，display:table和word-spacing

<style>
        .baba {
            display: inline-block;
            width: 200px;
            height: 100px;
            background: green;
            display: table;
            word-spacing: 0;
        }
        .son {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: #dcdcdc;
        }
    </style>
</head>
<body>
    
    <span class="baba">
        <span class="son"></span>
        <span class="son"></span>
        <span class="son"></span>
    </span>
</body>

limingxiaojie

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
相邻的两个inline-block节点出现间隔的原因以及解决方法

产生间隔的原因：元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。<style> .baba { display: ...
复制链接

扫一扫