首页 > 代码库 > 去除inline-block元素之间间隙和换行产生的行于行间隙的最佳方法
去除inline-block元素之间间隙和换行产生的行于行间隙的最佳方法
方法:给inline-block元素的容器设置font-size: 0;inline-block的字体大小再另行设置即可。
- css代码
1 .inline-block-box{ 2 font-size: 0; 3 border: 1px solid blue; 4 box-sizing: border-box; 5 } 6 .inline-block{ 7 display: inline-block; 8 width: 300px; 9 height: 100px; 10 line-height: 100px; 11 text-align: center; 12 font-size: 20px; 13 border: 1px solid red; 14 box-sizing: border-box; 15 }
- html代码
1 <div class="inline-block-box"> 2 <div class="inline-block">inline-block</div> 3 <div class="inline-block">inline-block</div> 4 <div class="inline-block">inline-block</div> 5 <div class="inline-block">inline-block</div> 6 </div>
去除inline-block元素之间间隙和换行产生的行于行间隙的最佳方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。