div/span 和精灵答案

【问题标题】：div/span and spritesdiv/span 和精灵
【发布时间】：2022-01-18 20:05:23
【问题描述】：

我正在用精灵替换我网站上的大多数内联图像。

sprite 类将包含一些基本的 css：

.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}

我看到在锚标签内嵌套 div 不是一个好主意。

<a><div class="sprite"></div></a>

我尝试将 sprite 添加到 span 元素。

<a><span class="sprite"></span></a>

但是 span 元素并没有扩展到我设置的宽度和高度。能够使用 span 元素将图像标签替换为 sprite 将非常有用。我可以在 span 元素中添加一个空白 gif 图像来扩展它。但这会破坏我想要使用精灵的原因（以减少 http 请求的数量）。

在锚标签内使用 div 元素是不正确的。

那么如何在锚元素中使用精灵呢？

而且总是存在对齐 div 的问题。如果图像在另一个元素中居中，如何将其替换为精灵？

【问题讨论】：

标签： css html

【解决方案1】：

您需要在默认为内联元素的span 元素上声明display: block;。比如：

.sprite{
    display: block;
    background-image:url(...);
    background-position:...;
    width: 16px;
    height:16px;
}

这应该会使span 元素扩展到您想要的宽度/高度。

希望这会有所帮助！

【讨论】：

我们可以将width 或height 添加到像span 这样的内联元素中，还是我们只是使用display: block 将其转换为div？
您几乎只是将其转换为div。
是的，您可以向跨度添加宽度和/或高度属性，但除非您更改其行为，否则它们将被忽略，这就是 display: block; 发挥作用的地方，不，元素是没有被“转换”——它仍然是span——而是它的默认行为正在改变，它的行为就像div。希望这是有道理的。
这解决了在锚标记中不使用 div 元素的问题。但它仍然带来了在父元素中居中图像的问题。
由于元素的大小是固定的，因此您始终可以以像素为单位定义背景相对于元素左上角的位置，并将其“手动”居中。但是，没有办法通过 CSS 裁剪精灵的一部分，以便将其用作更宽和/或更高的元素中的背景，唯一的解决方案（仅适用于非重复背景）是留下足够的该精灵右下角的空白区域，以便清除其元素的右边距和下边距。

【解决方案2】：

您可以将span元素的显示属性设置为inline-block

.sprite{
  background-image:url(...);
  background-position:...;
  width: 16px;
  height:16px;
  display: inline-block;
}

这样，.sprite 类的 span 元素将接受 width 和 height 属性，并且还将像 inline 元素一样工作。

【讨论】：