容易发现,inline-block元素之间会有间距,
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 *{padding:0;margin:0;}
7 ul{list-style-type:none; }
8 li
9 {
10 display:inline-block;
11 width:60px;
12 height:60px;
13 line-height:60px;
14 font-size:30px;
15 text-align:center;
16 color:White;
17 background-color:Purple;
18 }
19 </style>
20 </head>
21 <body>
22 <ul>
23 <li>A</li>
24 <li>B</li>
25 <li>C</li>
26 </ul>
27 </body>
28 </html>
效果图:
要消除这种间距,可以对其父元素设置font-size:0;
在本例中,对ul设置font-size为0后,效果如下:
img等inline-block元素亦是如此设置;
另外,之前提到的负margin特性也可以实现这一功能.
时间： 2024-10-13 22:36:59