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

box-sizing的属性

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

先看一个html代码

    
1
    
2
    
3
    
4
    
5

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放在同一行

    
1
2
3
4
5