工作生活

如何消除div之间的间隙

2019-07-03  本文已影响0人  猿分让我们相遇
<div>
            <div style="display: inline-block;background-color: #2f7dcd">1</div>
            <div style="display: inline-block;background-color: #2f7dcd">2</div>
            <div style="display: inline-block;background-color: #2f7dcd">3</div>
        </div>

原因:浏览器解析的时候,会把行内元素(包括行内块元素)之间的回车换行符解析成一定的间隙,间隙的大小跟默认的字体大小设置有关。

方法:其父元素加上font-size:0的属性,但是字体需要额外处理,如下。

<div style="font-size:0">
            <div style="font-size:14px; display: inline-block;background-color: #2f7dcd">1</div>
            <div style="font-size:14px; display: inline-block;background-color: #2f7dcd">2</div>
            <div style="font-size:14px; display: inline-block;background-color: #2f7dcd">3</div>
 </div>
上一篇下一篇

猜你喜欢

热点阅读