inline-block元素默认间距的两种清除方法示例代码
发布时间：2016-10-27 16:11:30 作者：佚名 
我要评论
我要评论真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，那么我们改如何解决这个问题呢？这篇文章直接通过示例给大家分享了两种解决的方法，有需要的朋友们下面来一起看看吧。
话不多说，直接来看示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
letter-spacing: -0.5em;
}
.content .box{
letter-spacing: normal;
}
.content2{
font-size: 0;
}
.content2 .box{
font-size: initial;
}
.box{
width: 200px;
height: 100px;
background-color: #EEEEEE;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h4>默认状态</h4>
<div>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>
<div class="box">盒子5</div>
</div>
<h4>方法一 letter-spacing: -0.5em</h4>
<div class="content">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>
<div class="box">盒子5</div>
</div>
<h4>方法二 font-size: 0</h4>
<div class="content2">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>
<div class="box">盒子5</div>
</div>
</body>
</html>
实现的效果图如下
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
- 这篇文章主要介绍了inline-block带来的元素间距问题解决,同时附上block和inline以及inlinke-block的作用对比,需要的朋友可以参考下2015-08-04
多个有inline-block的div的间距与编程的写法有差异
多个有border、inline-block的div的间距会根据编程的写法有差异，下面看示例，大家感受下2014-03-04- inline-block 属性的使用随处可见，ie 从 5.5 开始就已经支持 display:inline-block 了，只是支持的并不是那么完美，接下来为大家详细介绍下空白间隙是如何产生的，以及解2013-03-28
- 有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果;那么今天我们就一起来2012-12-24
- 网页制作Webjx文章简介：去除inline-block元素间间距的N种方法。2012-07-11
- 这篇文章主要为大家详细介绍了快速去掉HTML中Inline-Block空白的5种方法，感兴趣的小伙伴们可以参考一下2016-06-21
- 这篇文章主要介绍了兼容浏览器的inline-block,需要的朋友可以参考下2016-02-17
深入解析CSS的display:inline-block属性的使用
这篇文章主要介绍了CSS的display:inline-block属性的使用,其中对使用时产生的空隙问题的解决作了重点讲解,需要的朋友可以参考下2015-11-09- 这篇文章主要介绍了CSS中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下2015-07-15
- 这篇文章主要介绍了深入了解float与inline-block,分别从兼容性，对父元素的影响等方面进行了分析，推荐给小伙伴参考下2014-12-04
最新评论