如何移除边框与背景间的未知内边距？预览正常导出异常

问题场景 #

使用自定义border-image实现边框时，预览显示正常，但导出后边框与内部背景之间出现了无法解释的内边距。相关代码如下：

<div class="p-2" style="width:100%; max-width: 400px; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch;
    border-image-slice: 35 fill;
    image-rendering: pixelated;">
  <div class="card border-0 rounded-0 py-10 px-10" style="background:#dbaa41; color:#3e2a14;">
    <p dir="ltr">┏━───────────────╮</p>
    <p dir="ltr">┃➥ Text goes here</p>
    <p dir="ltr">┗━───────────────╯</p>
  </div>
</div>

已尝试过设置padding为0、添加no-margin类、修改fill属性和background-color，但均未解决问题。

解决方案 #

这种差异通常源于不同渲染环境对border-image的解析逻辑不一致，尤其是border-image-slice的fill属性与边框宽度的组合计算导致额外空间。以下两种方法可以解决：

方法1：负margin抵消内部间距

给内部内容容器设置与外层边框宽度相等的负margin，直接抵消border-image带来的内部空间，同时外层容器启用box-sizing: border-box确保宽高计算包含边框：

<div style="width:100%; max-width: 400px; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 35 stretch fill;
    image-rendering: pixelated; box-sizing: border-box;">
  <div class="card border-0 rounded-0 py-10 px-10" style="background:#dbaa41; color:#3e2a14; margin: -26px;">
    <p dir="ltr">┏━───────────────╮</p>
    <p dir="ltr">┃➥ Text goes here</p>
    <p dir="ltr">┗━───────────────╯</p>
  </div>
</div>

方法2：伪元素独立实现边框层

将边框与内容容器分离，用绝对定位的子元素单独渲染边框，彻底避免border-image与内容容器的间距问题：

<div style="width:100%; max-width: 400px; position: relative; padding: 26px; box-sizing: border-box;">
  <div class="card border-0 rounded-0 py-10 px-10" style="background:#dbaa41; color:#3e2a14;">
    <p dir="ltr">┏━───────────────╮</p>
    <p dir="ltr">┃➥ Text goes here</p>
    <p dir="ltr">┗━───────────────╯</p>
  </div>
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 35 stretch fill;
    image-rendering: pixelated; pointer-events: none;"></div>
</div>

原理说明 #

• 方法1通过负margin直接修正内容容器的位置，强制贴合边框内侧，无视渲染引擎对border-image的间距计算差异。
• 方法2将边框作为独立的视觉层覆盖在内容上，边框与内容的位置完全由CSS定位控制，从根源避免了border-image的内部空间问题。

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