inline-block元素默认间距的两种清除方法示例代码
发布时间:2016-10-27 16:11:30 作者:佚名 我要评论
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,那么我们改如何解决这个问题呢?这篇文章直接通过示例给大家分享了两种解决的方法,有需要的朋友们下面来一起看看吧。
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
话不多说,直接来看示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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
最新评论