与行内块级元素间空白的战斗

时间：2018-08-10 13:10:27 阅读：138 评论：0 收藏：0 [点我收藏+]

作者： CHRIS COYIER

我最近已经在推特上看到多次这种情况，之后在Dabblet做了一个有趣的测试，因此我认为它对于文档来说是一项重要的事情。

这是协议：按照你通常安排HTML局部的多个行内-块级（inline-block）元素会在它们之间会存在空白区域。

换句话说：

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

将导致：

这通常很令人讨厌

我们经常想要这些元素彼此之间相互碰撞接触。就导航来说，这意味着避免避开了令人尴尬的小而不可点击的间隙。

这并非一个“bug”（我并不这样认为）。它仅仅是设置元素在行内的方式。你想要你所键入的单词它们之间的空格正确吗？这些在这些块级之间的空格就像单词之间的空格。这并不是说规范不能被更新来定义在行内-块级元素之间的空格应该被消除，但是我可以肯定这是一个庞大的尚未解决的复杂问题，并且可能永远没有解决的那一天。

这里有一些方法来解决间隙，并且让行内-块级元素直接彼此紧密相接。

移出空格

出现空格的原因是因为在元素（换行符和制表符都算作空格，仅仅是为了更加清楚）之间存在空格。最小化HTML将解决这个问题，或以下其中一个技巧：

<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>

它们全部相当时髦，但这都属于小把戏。

负外边距

你可以用-4px的外边距（可能需要根据父元素的字体大小来调整）来重新定位元素。显然在老IE（6&7）中这是有问题的，但是如果你不关心这些浏览器，至少你可以保持代码格式干净。

nav a {
  display: inline-block;
  margin-right: -4px;
}

跳过闭合标签

HTML5不关心闭合标签。尽管你必须承认这样令人感到怪异。

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

将字体大小设置为零

一个拥有零字体大小的空格是零宽度。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

Matt Stow 指出在安卓系统中font-size:0;技术存在一些问题。引用：Pre-Jellybean 根本没有移除空格，Jellybean有一个bug，末尾元素随机有一点空格。参见研究。

还需注意，如果设置字体采用em单位，这种零字体大小可能是一个问题，因为em关联的子元素将也有零字体大小。rem将有助这个问题，否则任何其他非关联字体大小将产生冲突。

另外一个怪异之处！Doug Stewart向我指出如果用这个技术使用@font-face，在Safari5.0.x中字体将会失真。（测试例子）（屏幕截图）

用浮动替代

也许他们根本不需要行内-块级元素，也许他们能浮动在一个或另个地方。这些允许你去设置它们的宽度和高度以及内边距等等。你仅仅不能像通过在父元素的行内-块级元素中使用text-align:center;居中他们。好……你可以，但是这非常怪异。

使用弹性盒子替代

如果你对浏览器支持程度可以接受并且你需要原来采用的行内-块级元素是居中的，你可以使用弹性盒子。它们不是完全可互换的布局模型或者任何事物，但是你可以从中获得你所需要的东西。

看

在CodePen上的案例

原文链接：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

与行内块级元素间空白的战斗

标签：src 内容居中协议 elements idg 代码引用 ioi

原文地址：https://www.cnblogs.com/f6056/p/9454333.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行