去除inline-block元素间间距

简介: 根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因。 第一种:  把代码之间的换行空白都去掉。      例如:     第一个inline-block元素第二个inline-block元素第二种:    把inline-block元素用一个大的div包起来,然后设置其字体大小为0即可,inline-block元素字体大小再单独设置。

根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因。

 

第一种:

  把代码之间的换行空白都去掉。

      例如:

     <div>第一个inline-block元素</div><div>第二个inline-block元素</div>


第二种:
  

  把inline-block元素用一个大的div包起来,然后设置其字体大小为0即可,inline-block元素字体大小再单独设置。

  例如:

     <div style=”font-size:0" class="space">
          <div>第一个inline-block元素</div>
          <div>第二个inline-block元素</div>
     </div>


这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
 

类似下面的代码:

.space {

    font-size: 0;

    -webkit-text-size-adjust:none;

}

 

相关文章
|
3月前
|
前端开发
去除 inline-block 元素间间距的方法
去除 inline-block 元素间间距的方法
|
4月前
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
25 0
|
9月前
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
45 0
|
6月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
118 0
|
8月前
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
39 0
|
8月前
消除两个inline-block元素之间的间隔
消除两个inline-block元素之间的间隔
30 0
|
9月前
display: block 属性影响flex布局
display: block 属性影响flex布局
span标签溢出元素设置省略号
span标签溢出元素设置省略号
125 0
font-size: 0消除空白字符导致的行内元素额外间距
`font-size: 0` 设置字体大小为0,但是它要实现的效果却不是字体为0看不见,而是消除子行内元素间额外多余的空白。最推荐的方式是,去掉标签之间的空格、换行等空白字符,这也是压缩...
407 0
font-size: 0消除空白字符导致的行内元素额外间距
|
前端开发 JavaScript
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
157 0
style样式优先级问题【display:block依旧无法显示DOM元素】