父母的盒子阴影必须忽略孩子的保证金

Question

假设我们有以下几种样式的简单标记：

.outer {
  box-shadow: 0 0 5px 2px red;
  padding: 2px;
}

.inner {
  margin-right: 25px;
}

<span class="outer">
  <span class="inner">Content</span>
</span>

这导致.outer跨度的宽度为.inner，其中包括25px margin。我想让.outer拥有box-shadow分布在自己的width上，但不包括inner个margin。

那有可能吗？

Answer 1

如何添加框阴影，填充到.inner而不是.outer

.inner {
  box-shadow: 0 0 5px 2px red;
  padding: 2px;
  margin-right: 25px;
}

<span class="outer">
  <span class="inner">Content</span>
</span>