Html Question posted in
Some basic documentation can be found here.

Html – Need to remove this mystery padding in between background and border

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    To remove the mystery padding between the border and its background, you need to ensure that both the inner div and its child elements have no margins or padding that could cause the issue.

    <div class="border-container">
    <div class="card-content">
        <p dir="ltr">┏━───────────────╮</p>
        <p dir="ltr">┃➥ Text goes here</p>
        <p dir="ltr">┗━───────────────╯</p>
    </div>
</div>

    Css,

    .border-container {
    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;
    padding: 0;
    margin: 0;
}

.card-content {
    background: #dbaa41;
    color: #3e2a14;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}

.card-content p {
    margin: 0;
    padding: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search