CSS实现：子元素margin与父元素padding重叠，不与兄弟元素重叠

我有一个带较大padding的父div，第一个子元素是图片，出于版权要求，这张图片需要最小margin。如果给图片加四周margin，会推开父元素的padding（导致图片右移，父元素垂直方向扩大），不符合预期。

父元素的padding比图片所需的必要margin大，看似简单的解决办法是把图片高度设为一行文字的高度（在不扩大父元素的前提下尽可能放大图片），只给图片加右侧margin。

但有时文本会换行，这时图片没有底部margin，会被文本侵占。下方第二个示例没有底部margin，第三个示例加了底部margin——文本下移了margin的3/4（6px），图片上移了margin的1/4（2px）。我不确定前两个示例里图片为什么低2像素，但没法再放大图片而不使父元素扩大。

核心疑问 #

如何给图片添加margin，使其margin可与父元素padding重叠，但不能与兄弟元素的margin重叠？

约束条件 #

• 父元素由Bootstrap定义，不想过多修改父类。
• 大多数元素不会有图片，所以更合理的做法是仅用CSS调整带图片的父元素（如有必要）。
  • 也可以用jQuery，但更倾向纯CSS解决方案（提出这个问题的部分目的是为了更好地学习CSS）。
• 这个问题和Bootstrap无关——本来可以做原生示例，但我熟悉当前用的尺寸和元素，用Bootstrap做示例更快。

示例代码 #

CSS

.accordion {
  width: 300px;
}

.accordion-button {
  font-weight: 500;
}

a.accordion-button {
  text-decoration: initial;
  display: block;
}

.my-img {
  height: 1.5em;
}

#margin1,
#margin2,
#margin3{
  position: fixed;
  left: 13px;
  z-index: 10;
}

#margin1 {
  top: 11px;
}

#margin2 {
  top: 70px;
}

#margin3 {
  top: 151px;
}

#button-padding1,
#button-padding2,
#button-padding3 {
  position: fixed;
  left: 1px;
  z-index: 15;
}

#button-padding1 {
  top: 1px;
}

#button-padding2 {
  top: 60px;
}

#button-padding3 {
  top: 143px;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>


<div class="accordion" id="MiddleAccordion">
  <div class="accordion-item">
    <span class="accordion-header" id="heading-01">
      <a class="accordion-button collapsed" type="button" href="#">
          <svg class="my-img me-2" viewBox="0 0 27 24" fill="black">
            <polygon points="0,0 27,0 27,24 0,24"/>
          </svg>
        Some short text
      </a>
    </span>
  </div>
  <div class="accordion-item">
    <span class="accordion-header" id="heading-02">
      <a class="accordion-button collapsed" type="button" href="#">
          <svg class="my-img me-2" viewBox="0 0 27 24" fill="black">
            <polygon points="0,0 27,0 27,24 0,24"/>
          </svg>
        Some longer text that wraps AROUND
      </a>
    </span>
  </div>
  <div class="accordion-item">
    <span class="accordion-header" id="heading-02">
      <a class="accordion-button collapsed" type="button" href="#">
          <svg class="my-img me-2 mb-2" viewBox="0 0 27 24" fill="black">
            <polygon points="0,0 27,0 27,24 0,24"/>
          </svg>
        Some longer text that wraps AROUND
      </a>
    </span>
  </div>
</div>


<svg id="margin1" viewBox="-8 -8 43 40" width="43">
  <polygon fill="none" stroke="black" stroke-dasharray="3,3" points="-8,-8 35,-8 35,32 -8,32"/>
  <!-- For alignment
  <polygon fill="white" points="0,0 27,0 27,24 0,24"/> -->
</svg>
<svg id="margin2" viewBox="-8 -8 43 40" width="43">
  <polygon fill="none" stroke="black"  stroke-dasharray="3,3" points="-8,-8 35,-8 35,32 -8,32"/>
  <!-- For alignment
  <polygon fill="white" points="0,0 27,0 27,24 0,24"/> -->
</svg>
<svg id="margin3" viewBox="-8 -8 43 40" width="43">
  <polygon fill="none" stroke="black"  stroke-dasharray="3,3" points="-8,-8 35,-8 35,32 -8,32"/>
  <!-- For alignment
  <polygon fill="white" points="0,0 27,0 27,24 0,24"/> -->
</svg>
<svg id="button-padding1" viewBox="0 0 298 58" width="298">
  <path fill="rgba(120,173,223,.7)" d="M 20 16 l 258 0 l 0 26 l -258 0 z" />
  <path fill="rgba(170,208,153,.7)" d="M 20 0 l 278 0 l 0 58 l -298 0 l 0 -58 l 20 0 l 0 42 l 258 0 l 0 -26 l -258 0 z" />
</svg>
<svg id="button-padding2" viewBox="0 0 298 82" width="298">
  <path fill="rgba(120,173,223,.7)" d="M 20 16 l 258 0 l 0 50 l -258 0 z" />
  <path fill="rgba(170,208,153,.7)" d="M 20 0 l 278 0 l 0 82 l -298 0 l 0 -82 l 20 0 l 0 66 l 258 0 l 0 -50 l -258 0 z" />
</svg>
<svg id="button-padding3" viewBox="0 0 298 88" width="298">
  <path fill="rgba(120,173,223,.7)" d="M 20 16 l 258 0 l 0 56 l -258 0 z" />
  <path fill="rgba(170,208,153,.7)" d="M 20 0 l 278 0 l 0 88 l -298 0 l 0 -88 l 20 0 l 0 72 l 258 0 l 0 -56 l -258 0 z" />
</svg>

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