解决行内块元素的左右缝隙问题

//行内块元素有哪些： img input button
#box{
    width：200px；
    height：200px；
    background：pink；
}
<div id ="box">
        <img src="./img/1.jpg" alt="">
        <img src="./img/1.jpg" alt="">
        <img src="./img/1.jpg" alt="">
</div>
//左右是缝隙是因为html标签换行造成的

有很多"民间"解决的方法:

1.取消标签换行
<div id ="box">
        <img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
        <img src="./img/1.jpg" alt="">
</div>

2.采用注释的方法
<div id ="box">
        <img src="./img/1.jpg" alt=""><!--我是注释
        --><img src="./img/1.jpg" alt="">
        <img src="./img/1.jpg" alt="">
</div>

比较官方一点的方法

#box{
    width：200px；
    height：200px；
    background：pink；
    font-size:0;
}
<div id ="box">
        <img src="./img/1.jpg" alt="">
        <img src="./img/1.jpg" alt="">
        <img src="./img/1.jpg" alt="">
</div>

比较细心点的伙伴,发现:其实不止左右,还有上下也有缝隙。

原理：文字和文字上下有缝隙,左右也有缝隙。(这是因为英文是四线三格书写,上下缝隙是因为基线原因,左右缝隙就是文字与文字之间是有距离的) 你可以把行内块元素看做是行内元素的文字解决方法就是font-size:0； 文字直接没了 也就没有缝隙了 也就不考虑基线的原因了。

给行内块元素设置浮动也可以解决 ---但注意有一个问题 父元素有可能会高度塌陷(产生高度坍塌的条件1.父元素不设置高2.子元素浮动 )
#box{
    background：pink；
    overflow：hidden；//解决父元素高度坍塌的问题
}
#box img{
    float：left；
}