css解决内联元素间的空白间隔

在内联元素的父级元素上设置font-size: 0px;即可。例如：

<div class="wrap">
    <ul>
        <li class="part1">1</li>
        <li class="part2">2</li>
        <li class="part3">3</li>
        <li class="part4">4</li>
    </ul>
</div>

*{
    margin:0;
    padding:0;
}
html, body {
    width: 100%;
    height: 100%;
}
ul li {
    list-style: none;
}
.wrap {
    width: 600px;
    margin: 0 auto;
    margin-top: 100px;
}
.wrap ul {
    font-size: 0px;
}
.wrap li {
    width: 25%;
    height: 150px;
    display: inline-block;
}
.part1 {
    background: red;
}
.part2 {
    background: green;
}
.part3 {
    background: pink;
}
.part4 {
    background: tomato;
}

转载于:https://www.cnblogs.com/sunshine21/p/10692205.html