Need help removing this mystery padding in between a border and its background. In the preview it looks fine, but it exports with that weird padding inside the frame. Here's the code:
<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>
I tried setting padding in the border to 0, class="no-margin" , change fill: and background.color:, nothing works. I'll also share how it looks in the preview and how it exports as How it looks on preview How it saves/exports
Please check if border-image
properties are correctly applied without any extra space.
<div class="p-0" 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 p-0 m-0" style="background:#dbaa41; color:#3e2a14;">
<p dir="ltr" style="margin: 0; padding: 0;">┏━───────────────╮</p>
<p dir="ltr" style="margin: 0; padding: 0;">┃➥ Text goes here</p>
<p dir="ltr" style="margin: 0; padding: 0;">┗━───────────────╯</p>
</div>
</div>
Try this and check if the padding issue is resolved in the exported version