span承载背景图标不显示，设absolute后布局异常求助

咱们先拆解你遇到的核心问题，再一步步给出解决方案：

为什么图标只有设置position:absolute才显示？ #

<span>是行内元素，默认情况下，行内元素的宽高由内容决定，你设置的width:20px和height:20px不会生效——相当于背景图没有可展示的容器空间，自然看不到。而设置position:absolute后，元素会被强制转为块级化元素，宽高设置才会生效，所以图标能显示，但absolute会让元素脱离正常文档流，不再和「TRENDING」文本保持同行布局，自然就错位了。

另外还要提个小细节：你HTML里的<p>TRENDING<p>标签没正确闭合，应该写成<p>TRENDING</p>，错误的闭合可能会让浏览器解析出额外节点，干扰布局。

解决办法 #

这里给你两种靠谱的方案，按需选择：

方案1：将span设置为inline-block（最简单直接） #

行内块元素既保留行内元素的同行特性，又支持自定义宽高，完美匹配你的需求。修改CSS如下：

.info-icon-up {
  background: url('../../../assets/img/svg/summary/trend-tick.svg') 50% no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  vertical-align: middle; /* 让图标和文本垂直居中对齐 */
  display: inline-block; /* 关键属性，开启行内块特性 */
}

.info-arrow-up {
  background: url('../../../assets/img/svg/summary/trend-arrow-up.svg') 50% no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  vertical-align: middle;
  display: inline-block;
}

同时修复HTML的p标签闭合问题：

<div class="card-summary__container"> 
  <div class="card-summary__img"></div> 
  <h1 class="card-summary__title">@title</h1> 
  <h1 class="card-summary__alert">@number</h1> 
  <div class="card-summary__info"> 
    <p>TRENDING</p>
    <span class="info-arrow-up"></span>
    <span class="info-icon-up"></span> 
  </div>
</div>

方案2：用Flex布局（更现代灵活的方式） #

给父容器.card-summary__info设置flex布局，让子元素自动同行对齐，这种方式适合后续可能的布局调整：

.card-summary__info {
  display: flex;
  align-items: center; /* 让所有子元素垂直居中 */
  gap: 4px; /* 替代margin-left，统一控制元素间距 */
}

.info-icon-up {
  background: url('../../../assets/img/svg/summary/trend-tick.svg') 50% no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
}

.info-arrow-up {
  background: url('../../../assets/img/svg/summary/trend-arrow-up.svg') 50% no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
}

同样需要修复HTML的p标签闭合，设置后「TRENDING」文本和两个图标会自动同行且垂直居中，不需要手动调整margin。

内容的提问来源于stack exchange，提问作者Smokey Dawson