div设置为inline-block后，两个div之间有空隙

Posted 2021-03-04 ฅ˙-˙ฅ

一. 问题： 如题所描述，div设置为inline-block后，产生如下现象：

二. 解决办法：

1. div之间不要换行不要留空格，写成这种：

<div class="parent">
        <div class="left">左侧</div><div class="right">右侧</div>
</div>

2. 父元素的font-size：0；再给子div设置一个font-size

        .parent {
            font-size: 0px; 
        }

        .left,
        .right {
            display: inline-block;
            font-size: 14px;
        }

三. 原因

出现空隙是因为div标签设为行内块级元素后代码里的换行被浏览器当成一个空格来解析