断舍离,永远去做你余生最重要的那件事

首页前端开发正文

去除inline-block元素间间距的方法

朱绪2017-06-021968CSS

大家应该都晓得,inline-block元素之间会有一定的间距,那么怎么去除这个间距呢?

我们先来看一下例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{padding: 0; margin: 0;}
        ul{list-style-type: none;}
        li{
            display: inline-block;
            width: 80px;
            height: 80px;
            line-height: 80px;
            font-size: 40px;
            text-align: center;
            color: white;
            background-color: purple;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

预览效果如下图:

去除inline-block元素间间距的方法

通过上图我们可以发现inline-block元素之间是存在一定的间距的。

在实际的开发过程中,这种间距可能会对我们的布局产生影响。

大多数时候为了不影响布局,我们有必要去除此间距。

在CSS中,我们可以给父元素定义一个“font-size: 0;”来去除inline-block元素的间距。

上述代码只需要改动ul的css样式即可,如下:

ul{
    list-style-type: none;
    font-size: 0;
}

改动好了之后再看,间距就没有了。