div设置display:inline-block属性产生空白间距

转载 2015年07月07日 11:17:46

     使用 inline-block 的时候,ie8、chrome、firefox、opera 以及 safari 浏览器下,两张图片之间有“空白间隙。

     平时写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是空白符。

     去除空白符的存在只需要设置字体大小为零就行了(font-size:0;)

    

     参考资料:http://www.jb51.net/css/68785.html

解决inline-block引起的空白间距问题

当我们在对元素的display属性使用inline-block值时,会在元素间形成一定宽度的空白间距。   下面看一下源代码: inline-block li{ display:inli...
  • annsheshira23
  • annsheshira23
  • 2015年08月18日 21:35
  • 1098

inline-block元素与父div底边之间的间距问题(inline-block与vertical-align:baseline)

在一些情况下,inline-block的元素距离父div底边会有距离,让我们看一下例子: 例子1,两个inline-block元素,设定了固定的宽高,第一个有文字,第二个没有文字: .div...
  • mr_orange_klj
  • mr_orange_klj
  • 2017年07月18日 15:17
  • 240

inline-block元素会有上下边距的解决方法

设置父元素的line-height为0;
  • jie_rookie
  • jie_rookie
  • 2017年06月28日 11:43
  • 457

display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”

居中导航 ul{text-align: center;height: 30px;line-height: 30px;/*background-colo...
  • love_chenfeng
  • love_chenfeng
  • 2016年04月28日 15:14
  • 2165

去除inline-block元素间间距,比较靠谱的两种办法

1.使用注释符号1 1234楼主对代码
  • eaglewyy
  • eaglewyy
  • 2016年05月24日 16:37
  • 2273

display:inline-block和元素水平居中的关系

一般情况下, 如果我们要使一个div在父元素中水平居中显示, 我们会给它设置一个宽度, 然后设置margin: 0 auto; 但这个属性只有在div的display为block或者默认情况下才会有效...
  • u012863664
  • u012863664
  • 2017年01月30日 10:49
  • 2871

DIV 设置 display:inline-block 导致 DIV 对不齐的解决方法

情景代码如上。 出问题的浏览器: 360,sogou,猎豹的极速模式 给DIV设置display:inline-block属性后,这四个DIV会拍在一排,但是会个别的高一点,不对齐。 解决方法: 给d...
  • ForeverCjl
  • ForeverCjl
  • 2013年11月21日 22:00
  • 8005

CSS中display属性:block、inline和inline-block的区别

设置span的高度和宽度无效,span的margin和padding无效
  • aitangyong
  • aitangyong
  • 2015年02月28日 20:51
  • 3333

display:inline-block的icon不垂直居中问题

需要了解知识点: 1、基线:基线并不是汉字的下端沿,而是英文字母x的下端沿; 2、行高指的是文本行的基线间的距离; 图片来源链接地址! 进入正题: 父元素设置line...
  • u012076852
  • u012076852
  • 2016年09月07日 11:50
  • 3758

解决display:inline-block 出现的间隙

是把父DIV加上:font-size:0; 他的作用便是让多余的空白符消失,当然这会造成所有子元素的文本都一同消失,因此你需要再在子元素加一个font-size:12px。...
  • abeetle
  • abeetle
  • 2014年10月09日 12:00
  • 6088
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div设置display:inline-block属性产生空白间距
举报原因:
原因补充:

(最多只允许输入30个字)