除掉inline-block 间距

1、现象：

 1 <!doctype html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <title>除掉inline-block 间距</title>
 7         <style type="text/css">
 8             * {
 9                 padding: 0;
10                 margin: 0;
11             }
12             
13             ul {
14                 list-style: none;
15             }
16             
17             ul li {
18                 display: inline-block;
19                 width: 100px;
20                 border: 1px solid red;
21             }
22         </style>
23     </head>
24 
25     <body>
26         <ul>
27             <li>555</li>
28             <li>666</li>
29             <li>777</li>
30         </ul>
31     </body>
32 
33 </html>

显示效果：

2、处理方法

父元素设置font-size: 0;

 1 <!doctype html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <title>除掉inline-block 间距</title>
 7         <style type="text/css">
 8             * {
 9                 padding: 0;
10                 margin: 0;
11             }
12             
13             ul {
14                 list-style: none;
15                 /*关键属性设置*/
16                 font-size: 0;
17             }
18             
19             ul li {
20                 display: inline-block;
21                 width: 100px;
22                 border: 1px solid red;
23                 font-size: 16px;
24             }
25         </style>
26     </head>
27 
28     <body>
29         <ul>
30             <li>555</li>
31             <li>666</li>
32             <li>777</li>
33         </ul>
34     </body>
35 
36 </html>

显示效果：