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