码迷,mamicode.com
首页 > 其他好文 > 详细

font-size:0消除元素间距

时间:2017-07-07 11:42:52      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:color   之间   enter   hit   这一   分享   ges   title   class   

容易发现,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特性也可以实现这一功能.

 

font-size:0消除元素间距

标签:color   之间   enter   hit   这一   分享   ges   title   class   

原文地址:http://www.cnblogs.com/wincent98/p/7131115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!