html中div取消间隙,将div作为子元素，并设置为行内块级元素时，如何去除div与div之间的间隙...

示例代码：

将div作为子元素，并设置为行内块级元素时，如何去除div与div之间的间隙

.root {

width: 300px;

height: 300px;

border: 1px solid black;

}

.item {

width: 100px;

height: 100px;

display: inline-block;

}

.item:nth-child(1) {

background: #863E01;

}

.item:nth-child(2) {

background: #CF0A5B;

}

.item:nth-child(3) {

background: green;

}

1

2

3

效果图：

问题定位：

出现该问题的原因是HTML中的空格最终会折算为一个字符，而这个字符在网页中显示会有一个宽度，这就造成间隙的产生。

解决办法：

方式一：

删除元素与元素的之间的空格

1

2

3

方式二：(推荐)

通过给父元素设置 font-size: 0; 来取消元素与元素之间的间隙

.root {

width: 300px;

height: 300px;

border: 1px solid black;

font-size: 0;

}

效果图：