【小知识点】去除inline-block元素间间距的办法

程序员宏雨技术 2022年11月9日

0 收藏 962 点赞 2,810 浏览 646 个字

之前一直用float浮动方法布局，因为display:inline-block有间隙，现在找到办法了。在父元素上面加font-sise:0，就可以了。

效果如图：

代码如下：

<!DOCTYPE html>
<html>    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            ul{
                box-sizing: border-box;
                list-style: none;
                margin: 0;
                padding: 0;
                font-size: 0;
            }
            li {
                display: inline-block;
                width: 25%;
                text-align: center;
                box-sizing: border-box;
                border: 1px solid;
            }
            img{
                width: 100px;
                height: 100px;
            }
            p{
                font-size: 20px;
            }
        </style>
    </head>    <body>
        <ul>
            <li>
                <img src="../img/angle.png" />
                <p>天使在唱歌</p>
            </li>
            <li>
                <img src="../img/angle.png" />
                <p>天使在唱歌</p>
            </li>
            <li>
                <img src="../img/angle.png" />
                <p>天使在唱歌</p>
            </li>
            <li>
                <img src="../img/angle.png" />
                <p>天使在唱歌</p>
            </li>
        </ul>
    </body></html>