`

去除inline-block元素间间距的N种方法

阅读更多

【前言】

       最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inline-block元素及去掉间隙的方法,在这里做一个简单的总结。

 

【列表】

(1)inline-block是什么?

(2)inline-block兼容性

(3)inline-block元素间隙由来

(4)移除inline-block元素间隙方法

 

 

【概论】

     CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素

 

【主体】

(1)inline-block是什么?

   inline-block 即内联块,内联块元素具有了内联元素以及块级元素的特性:

   ①元素之间可以水平排列 

   ②可以当做一个块级元素来设置各种的属性,例如:width、height、padding等

<div id="demo">
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
</div>
#demo span{
    display:inline-block;
   background:#ddd;
}

   效果图:

  

(2)block level的元素

      IE7及以下浏览器对块级元素(block element)的支持并不完全,它们只支持用display:inline-block去定义一个inline level的元素为内联块。

      由于IE7及以下浏览器支持直接将inline level元素设置为内联块,所以我们可以变通实现,先将block level元素设置为inline,然后再去触发该元素的hasLayout,使其拥有和inline-block相似的特性。可以这样写:

 

<div id="demo">
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</div>
#demo div{
    display:inline-block;
    *display:inline; /*IE7 hack*/
    *zoom:1; /*触发hasLayout*/
}

 

    IE7及以下浏览器:block level元素转换为inline-block,在IE7及以下浏览器下元素间不出现间隙;inline level元素转换为inline-block,在IE7及以下浏览器下元素间出现间隙;紧跟block level转换为inline-block的元素之后有个inline level转换为inline-block的元素,在IE7及以下浏览器下这俩元素间不出现间隙;紧跟inline level转换为inline-block的元素之后有个block level转换为inline-block的元素,在IE7及以下浏览器下这俩元素间出现间隙;其它浏览器任何情况下均出现间隙;

 

(3)inline-block元素间隙由来

   定义为inline-block元素会产生间隙,如果不设置display:inline-block,会是什么效果?如下:

 

<div class="demo">
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
</div>
.demo span{
     background:#ddd;
}
    效果图:

 

   

   上面例子中,对span不做任何处理依然存在空隙,这到底是什么原因,是否是结构上的问题。假如将span标签都写成一行,又是怎样的效果,来看一下:

 

<div class="demo">
        <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span
         ><span>我是一个span</span>
    </div>
.demo span{
         background:#ddd;
}
   效果图:

 

  

 

   可以看到间隙是由换行或者回车导致的。只要把标签写成一行或者标签直接没有空格,就不会出现间隙。但是这种方式是不太可靠,存在太多不可控的因素导致失效,例如:代码生成工具、代码格式化、或者其他人修改了代码等等。下面列举了各种去掉间隙的方法,是否适合需要看具体的应用场景了。

 

(4)移除inline-block元素间隙方法

   【①】. 移除标签间的空格

   元素间的间隙出现的原因是元素标签之间的空格,把空格去掉间隙自然就会消失。来看以下几种写法:

*写法一:

<div class="demo">
   <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</div>

*写法二:

<div class="demo">
        <span>我是一个span
        </span><span>我是一个span
        </span><span>我是一个span
        </span><span>我是一个span</span>
</div>
 *写法三:利用HTML注释标签
<div class="demo">
        <span>我是一个span</span><!-- 
        --><span>我是一个span</span><!-- 
        --><span>我是一个span</span><!-- 
        --><span>我是一个span</span>
</div>

【②】取消标签闭合

把span标签的结束标签去掉,这样间隙就没有了。为了兼容IE6/IE7,最后一个标签需要闭合。

<div class="demo">
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
</div>
.demo span{
  background:#ddd;
  display: inline-block;
}
   在美团webapp页面中貌似也是用到了这种方法。可以看下:
  源代码:

 

【③】使用font-size:0

 在父容器上使用font-size:0;可以消除间隙,可以这样写:

<div class="demo">
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span</span>
    </div>
    .demo {font-size: 0;}
    .demo span{
         background:#ddd;
         display: inline-block;
         font-size: 14px; /*要设置相应的字号*/
    }

 

 对于Chrome, 其默认有最小字体大小限制,考虑到兼容性,需要取消字体大小限制,这样写:

<div class="demo">
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span</span>
    </div>
    .demo {font-size: 0;-webkit-text-size-adjust:none;}
    .demo span{
         background:#ddd;
         display: inline-block;
         font-size: 14px; /*要设置相应的字号*/
    }

【④】使用letter-spacing

类似下面的代码:

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

    根据我的测试,该方法可以搞定基本上所有浏览器,包括IE6/IE7浏览器,不过Opera浏览器下有问题:最小间距1像素,然后,letter-spacing再小就还原了。

 

 

 

总结:

      在移动端的页面中,个人倾向于设置font-size:0这种方法来清除掉。对于PC端上,可以参考doyoe的全浏览器兼容方案http://demo.doyoe.com/css/inline-block-space/

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    inline-block元素间距去除掉方法介绍(图文教程)

    标题中提到的“inline-block元素间距去除”指的是一种在Web页面布局中常见的问题,即使用display:inline-block属性的元素间会存在不必要的空隙。这个问题通常发生在元素间有换行或空格时,因为HTML解析时会将空格和...

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...

    详解CSS 去掉inline-block元素间隙的几种方法

    《CSS去除inline-block元素间隙的策略与解析》 在CSS布局设计中,inline-block元素的间隙问题时常困扰着开发者。这种间隙可能导致布局错位,影响整体的视觉效果。本文将深入探讨inline-block元素的特性,分析间隙...

    浅谈inline-block及解决空白间距

    然而,在使用 `display: inline-block` 时,经常会遇到一个问题,那就是元素间会存在额外的空白间距。本文将探讨这个问题及其解决方案。 首先,当我们将元素设置为 `display: inline-block` 时,这些元素会按照文本...

    5种方法快速去掉HTML中Inline-Block的空白

    以下五种方法可以帮助你快速去掉HTML中`inline-block`元素间的空白: 1. **元素间不留任何空白**: 这是最直接但可能影响代码可读性的方法。在HTML代码中,将相邻的`inline-block`元素写在同一行,不留下空格或...

    css几种解决inline-block间隙的方案(整理)

    `inline-block`元素间的空格,包括换行符和缩进,都会被浏览器解析为无形的空白字符,从而在元素之间产生间距。这个间距的大小通常等于父元素字体大小的约1/3。 1. **改变书写结构** 一种直观的解决方法是通过...

    去除元素之间的空格1

    对于连续的`&lt;a&gt;`标签,这些空格可能会导致元素间的间距,影响整体布局的紧凑性。 要消除`&lt;a&gt;`标签之间的空格,可以采取以下方法: 1. **设置父元素字体大小为0**: 根据描述,我们可以将父元素的`font-size`属性...

    自适应宽度的CSS圆角背景的按钮

    总结起来,创建自适应宽度的CSS圆角背景按钮,主要依赖于`border-radius`属性实现圆角效果,利用`display: inline-block;`和不设定固定宽度实现自适应宽度,以及通过适当的内填充和文本对齐方式保持内容居中。通过...

    CSS常用的图文布局列表.rar

    3. 使用`display: inline-block`或`inline-flex`:将图片和文本元素设置为行内块级或行内弹性元素,使它们在同一行显示,并可通过调整`vertical-align`实现垂直对齐。 4. Flexbox图文布局:利用`align-items`和`...

    最新-教你制作最精良的CSS自定义导航条 精品.pdf

    为了防止元素间的间距问题,我们可以设置`margin-right`来调整它们之间的距离。 ```css .nav li { width: 100px; text-align: center; margin-right: 10px; } ``` 最后,可能还需要对`&lt;a&gt;`标签进行一些样式调整...

    html+css笔记总结1

    解决方法通常是在父元素中使用`clearfix`类或者`overflow:hidden`。此外,垂直方向上的外边距可能出现重叠,导致实际外边距小于设定值,可以通过创建匿名块元素(如`:before`伪元素)来解决。 8. **a标签去下划线**...

    CSS2.布局入门源码

    而`display: inline-block`能让元素保持内联的同时具有块级元素的宽高特性。 外部样式表文件(如`external.css`)是将CSS样式集中管理的方式,它将所有的样式规则写在一个单独的文件中,然后通过`&lt;link&gt;`标签引入到...

    html、css、js全阶段试题答案.pdf

    为了使一个浮动元素居中,可以设置父元素的 `text-align` 属性为 `center`,并将浮动元素设置为 `display: inline-block`: ```css .parent { text-align: center; } #my-defined { display: inline-block; ...

    DIV+css学习笔记

    `display`属性用于控制元素的显示方式,如`inline`使元素呈现在一行中,`block`使其变为块级元素,`inline-block`结合了两者特性,`none`则隐藏元素。 【文字样式】 - `font-family`用于设定字体类型。 - `line-...

    用CSS控制的横向列表菜单.rar

    `display: flex`让子元素在一行内灵活布局,而`display: inline-block`则使它们像文字一样排列。 接下来,我们可以对菜单项`li`进行样式设定,比如添加边距、背景色、字体样式等: ```css .horizontal-menu li { ...

    最全的CSS浏览器的兼容问题

    本文针对CSS浏览器兼容性问题进行了较为详细的介绍,包括去除a链接虚线框、实现背景透明、垂直居中、解决IE6的margin加倍问题、浮动元素间的间距问题、解决IE的宽度和高度问题以及解决DIV浮动文本3像素的bug等。...

    清新淡雅的表单效果!兼容IE、FF、OP等浏览器

    1. 使用内联Block元素:将`display`属性设置为`inline-block`,可以让表单元素并排显示,同时保持块级元素的特性。 2. 垂直对齐:使用`vertical-align: middle;`可以确保表单元素在行内元素中居中对齐。 3. 按钮...

    「HTML+CSS」--自定义按钮样式【001】

    display: inline-block; /* 显示为块级元素 */ font-size: 16px; /* 字体大小 */ margin: 4px 2px; /* 间距 */ cursor: pointer; /* 鼠标悬停时形状 */ } ``` 为了进一步定制,可以添加伪类(如`:hover`, `:...

Global site tag (gtag.js) - Google Analytics