如何让span容器完美包裹SVG购物车图标？

我用以下HTML代码实现带计数徽章的购物车图标，SVG图标被包裹在span容器（红色边框）中，但图标（蓝色边框）溢出了容器，两者边界错位。请问怎么让容器和图标完美适配？

原始代码 #

CSS #

.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header-cart .cart-contents {
  display: inline-block;
  background-color: transparent;
  height: auto;
  width: auto;
  padding: 10px 0;
  color: #222;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid lightgray;
}

.site-header-cart .cart-contents .cart-button {
  position: relative;
  border: 1px solid red;
}

.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
  max-width: 100%;
  fill: currentColor;
  border: 1px solid blue;
}

.site-header-cart .cart-contents .cart-button .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  color: #fff;
  background-color: #999;
  border-radius: 100%;
  font-size: 0.563rem;
  line-height: 15px;
  text-align: center;
}

HTML #

<ul class="site-header-cart">
  <li>
    <a class="cart-contents" href="https://www.example.com/cart/">
      <span class="cart-button">
                <svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid blue;"><path d="M 7.499889,21 Q 6.7574042,21 6.2286651,20.47125 5.6999261,19.9425 5.6999261,19.2 5.6999261,18.4575 6.2286651,17.92875 6.7574042,17.4 7.499889,17.4 8.2423738,17.4 8.771113,17.92875 9.2998519,18.4575 9.2998519,19.2 9.2998519,19.9425 8.771113,20.47125 8.2423738,21 7.499889,21 Z M 16.499704,21 Q 15.757219,21 15.22848,20.47125 14.699741,19.9425 14.699741,19.2 14.699741,18.4575 15.22848,17.92875 15.757219,17.4 16.499704,17.4 17.242189,17.4 17.770928,17.92875 18.299667,18.4575 18.299667,19.2 18.299667,19.9425 17.770928,20.47125 17.242189,21 16.499704,21 Z M 6.7349048,6.6 8.8948603,11.1 H 15.194731 L 17.66968,6.6 Z M 5.8799223,4.8 H 19.15465 Q 19.672138,4.8 19.942133,5.2612499 20.212128,5.7225 19.964633,6.1949999 L 16.769698,11.955 Q 16.522203,12.405 16.105962,12.6525 15.689721,12.9 15.194731,12.9 H 8.4898688 L 7.499889,14.7 H 18.299667 V 16.5 H 7.499889 Q 6.4874098,16.5 5.9699205,15.611249 5.4524311,14.7225 5.9249213,13.845 L 7.1398964,11.64 3.899963,4.8 H 2.1 V 3 H 5.0249398 Z M 8.8948603,11.1 H 15.194731 Z"></path>
                </svg>
                <span class="cart-badge">1</span>
      </span>
    </a>
  </li>
</ul>

效果展示 #

图标溢出容器的核心原因是inline/inline-block元素的基线对齐特性：SVG作为inline-block元素会默认和文字基线对齐，导致底部多出空白，加上容器没有明确的尺寸约束，最终出现错位。以下是三种实用的解决方法：

方法1：修正SVG的垂直对齐方式 #

给SVG添加vertical-align: top或vertical-align: middle，让它脱离基线对齐，消除底部空白：

.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
  max-width: 100%;
  fill: currentColor;
  border: 1px solid blue;
  vertical-align: top; /* 新增：修正垂直对齐 */
}

方法2：给容器设置与SVG一致的尺寸 #

因为SVG的宽高是20px，直接给.cart-button设置相同的宽高，同时让SVG占满容器：

.site-header-cart .cart-contents .cart-button {
  position: relative;
  border: 1px solid red;
  display: inline-block; /* 确保容器支持宽高设置 */
  width: 20px;
  height: 20px;
}
.site-header-cart .cart-contents .cart-button svg {
  display: block; /* 替换为block消除inline元素的默认间距 */
  width: 100%;
  height: 100%;
  fill: currentColor;
  border: 1px solid blue;
}

方法3：清除inline-block元素的默认间距 #

给.cart-button设置font-size: 0，清除inline元素之间的默认空白（徽章是绝对定位，不受此设置影响）：

.site-header-cart .cart-contents .cart-button {
  position: relative;
  border: 1px solid red;
  font-size: 0; /* 清除inline元素的默认间距 */
}
.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
  max-width: 100%;
  fill: currentColor;
  border: 1px solid blue;
}

CSS #

.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header-cart .cart-contents {
  display: inline-block;
  background-color: transparent;
  height: auto;
  width: auto;
  padding: 10px 0;
  color: #222;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid lightgray;
}

.site-header-cart .cart-contents .cart-button {
  position: relative;
  border: 1px solid red;
}

.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
  max-width: 100%;
  fill: currentColor;
  border: 1px solid blue;
  vertical-align: top; /* 新增：修正垂直对齐 */
}

.site-header-cart .cart-contents .cart-button .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  color: #fff;
  background-color: #999;
  border-radius: 100%;
  font-size: 0.563rem;
  line-height: 15px;
  text-align: center;
}

HTML #

<ul class="site-header-cart">
  <li>
    <a class="cart-contents" href="https://www.example.com/cart/">
      <span class="cart-button">
                <svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 7.499889,21 Q 6.7574042,21 6.2286651,20.47125 5.6999261,19.9425 5.6999261,19.2 5.6999261,18.4575 6.2286651,17.92875 6.7574042,17.4 7.499889,17.4 8.2423738,17.4 8.771113,17.92875 9.2998519,18.4575 9.2998519,19.2 9.2998519,19.9425 8.771113,20.47125 8.2423738,21 7.499889,21 Z M 16.499704,21 Q 15.757219,21 15.22848,20.47125 14.699741,19.9425 14.699741,19.2 14.699741,18.4575 15.22848,17.92875 15.757219,17.4 16.499704,17.4 17.242189,17.4 17.770928,17.92875 18.299667,18.4575 18.299667,19.2 18.299667,19.9425 17.770928,20.47125 17.242189,21 16.499704,21 Z M 6.7349048,6.6 8.8948603,11.1 H 15.194731 L 17.66968,6.6 Z M 5.8799223,4.8 H 19.15465 Q 19.672138,4.8 19.942133,5.2612499 20.212128,5.7225 19.964633,6.1949999 L 16.769698,11.955 Q 16.522203,12.405 16.105962,12.6525 15.689721,12.9 15.194731,12.9 H 8.4898688 L 7.499889,14.7 H 18.299667 V 16.5 H 7.499889 Q 6.4874098,16.5 5.9699205,15.611249 5.4524311,14.7225 5.9249213,13.845 L 7.1398964,11.64 3.899963,4.8 H 2.1 V 3 H 5.0249398 Z M 8.8948603,11.1 H 15.194731 Z"></path>
                </svg>
                <span class="cart-badge">1</span>
      </span>
    </a>
  </li>
</ul>

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