空span标签无法显示SVG背景图标问题求助

问题核心：你给.popcorn设置了width和display:inline-block，但没有定义高度。空的inline-block元素默认高度为0，背景图没有可渲染的空间，所以无法显示；当span内有内容时，内容会撑起元素高度，背景图才会正常展示。

解决办法 #

给.popcorn添加高度相关属性，以下是几种可行方案：

1. 设置固定高度 #

直接补充height属性，和宽度匹配保证图标比例正常：

footer .popcorn {
  background-image: url('./logo.svg');
  width: 30px;
  height: 30px; /* 新增固定高度 */
  background-size: cover;
  background-position: center;
  display: inline-block;
}

2. 用padding撑开高度 #

适合需要保持宽高比的场景，垂直padding的百分比基于元素宽度计算：

footer .popcorn {
  background-image: url('./logo.svg');
  width: 30px;
  padding-top: 100%; /* 基于宽度的100%，实现正方形比例 */
  background-size: cover;
  background-position: center;
  display: inline-block;
  vertical-align: middle; /* 与input垂直对齐 */
}

3. 设置最小高度 #

如果不确定具体高度，用min-height确保元素有最小渲染空间：

footer .popcorn {
  background-image: url('./logo.svg');
  width: 30px;
  min-height: 30px;
  background-size: cover;
  background-position: center;
  display: inline-block;
}

额外提示：如果SVG本身带有透明区域，注意调整background-size与元素尺寸匹配，避免图标变形。

内容的提问来源于stack exchange，提问作者Dami Devil