• 没啥好说,更新慢

inline-block的诡异间隙原因和解决方法

编程开发 每天学 来源:原创 5个月前 (03-23) 189次浏览

在对主题尾部的Footer进行改造的时候我删除了原本的float改用inline-block实现,没想到在本地测试是很完美的:
inline-block的诡异间隙原因和解决方法

然而上传到服务器里面他们中间的间隙就消失了:
inline-block的诡异间隙原因和解决方法

inline-block是什么?

Inline-block是元素display属性的一个值。这个名字的由来是因为,display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。

  • 块级元素(block elements),来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
  • 行内元素(inline elements)排列方式是水平排列。
  • 行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列

如果你考虑了上面这些东东,你可以了解到,inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后,同样会水平排列。虽然他们实现的原理不同,但内部表现为块级元素,水平排列这种需求,浮动跟inline-block都适合实现。

inline-block和float的区别

虽然设置浮动跟设置inline-block有些特征类似,但两者的区别还是非常明显的:

  • 文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
  • 水平位置(Horizontal position):很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
  • 垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
  • 空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
  • IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。

原因

inline-block会引起元素和元素之间几个像素的间隙(具体间隙大小取决于字体大小)。造成空白间隙的原因是在标签和标签之间使用了空格或换行符。 因为空白字符也是字符,也会引用CSS样式。所以我在本地测试没有问题(有间隙)是因为本地没有对HTML代码进行压缩,而到服务器里面自动对HTML代码压缩了所以换行没了,空白间隙也就没了。

解决方法

不闭合标签

我把前面几个标签取消了闭合,但保留了最后一个就把间隙给去掉了,然后只需要自己再实现间隙就可以了。

<ul>
      <li>
        <p class="first"><?php echo _mtx('superfoot_1_title'); ?></p><span><?php echo _mtx('superfoot_1_content'); ?></span>
      
      <li>
        <p class="second"><?php echo _mtx('superfoot_2_title'); ?></p><span><?php echo _mtx('superfoot_2_content'); ?></span>
      
      <li>
        <p class="third"><?php echo _mtx('superfoot_3_title'); ?></p><span><?php echo _mtx('superfoot_3_content'); ?></span>
      
      <li>
        <p class="fourth"><?php echo _mtx('superfoot_4_title'); ?></p><span><?php echo _mtx('superfoot_4_content'); ?></span>
      </li>
    </ul>

当然也有更骚的写法,比如全写在一行、利用注释功能,但我更喜欢这一种。

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>
<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

使用font-size:0

例如我从网上找到的代码:

ul{
    list-style: none;
    font-size: 0;
}
li{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    font-size: 16px;    
}

利用负margin-left(不推荐具体,负margin多少取决于字体的大小)

ul{
      list-style: none;
  }
  li{
      display: inline-block;
      width: 100px;
      height: 100px;
      background: red;
      margin-left: -5px;

  }

总起来说还是第一种方法最优雅,也可以用float或者flexbox

什么时候使用inline-block,什么时候使用float

什么时候使用,取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。如果你需要居中对齐元素,inline-block是个好选择。

最终,这可以归结为float跟inline-block的两种属性作用后的区别,你需要对其作出选择。

  • 使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。
  • 使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。

参考来源

https://www.w3cplus.com/css/inline-blocks.html
https://css-tricks.com/fighting-the-space-between-inline-block-elements/


每天学 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:inline-block的诡异间隙原因和解决方法
赞(1)
分享到: 更多 (0)

为了阻止垃圾和反动评论,您必须才能发表评论,使用功能只需要1分钟注册好账号!