如何消除两个行内块级元素（inline-block）之间的空格

box-sizing的属性

属性	含义
content-box	默认W3C标准，非IE标准
border-box	把边框宽度加入到元素宽度内
inherit	从父级继承

先看一个html代码

<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

css如下

html {
    box-sizing: border-box;
}
* {
    box-sizing: inherit;margin: 0;padding: 0;
}
*::before, *::after {
    box-sizing: border-box;
}
ul, li {
    list-style: none;
}
ul {
    /* 重点 */
    font-size: 0;
}
.ul li {
    width: 20%;display: inline-block;
    border: 10px solid #f00;
    font-size: 14px;
}

或者是删除元素标签后面的内容，把li放在同一行

<ul class="ul">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>