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

display:inline-block 去除间隙

时间:2016-11-15 17:15:08      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:ima   分享   otto   cccccc   解决   center   ges   lock   css   

先写出代码


技术分享

核心css代码:

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;}
.sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: orange;text-align: center;font-size: 26px;
.sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: blue;text-align: center;font-size: 26px;}

核心html代码:

<div class="sample0">0</div>
<div class="sample1">1</div>
<div class="sample2">2</div>

 

 

 

问题: display:inline-block的块之间,有空隙


技术分享

 

原因:换行显示或空格分隔

 

解决方案一:margin 设置负值

核心 css 代码

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;margin-right: -4px;}
.sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: orange;text-align: center;font-size: 26px;margin: 0;margin:0 -4px;}
.sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: blue;text-align: center;font-size: 26px;margin-left: -4px;}

 

解决方案二: 将html元素写紧凑(消除空格)

核心 html 代码

<div class="sample0">0</div><div class="sample1">1</div><div class="sample2">2</div>

display:inline-block 去除间隙

标签:ima   分享   otto   cccccc   解决   center   ges   lock   css   

原文地址:http://www.cnblogs.com/qq-757617012/p/6066093.html

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