首页 > 代码库 > font-size:0消除元素间距
font-size:0消除元素间距
容易发现,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消除元素间距
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。