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

佚名 6年前 (2019-04-11) 随笔 676人围观抢沙发百度已收录

在内联元素的父级元素上设置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;
}