Looking to eliminate the pesky mystery padding that's wedged between the background and border

Can anyone assist with getting rid of the mysterious padding that appears between a border and its background? The design looks perfect in the preview, but when exported, there is unwanted padding inside the frame. Here's the snippet of 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've attempted adjusting padding in the border to 0, using class="no-margin", changing fill:, and background.color:, but nothing seems to resolve the issue. I will also provide a visual of how it appears in the preview and upon exporting: Preview Appearance Exported Version

htmlcssborderpaddingmargin

Answer №1

Make sure to verify that the border-image properties are correctly implemented without any additional spacing.

<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;">┃➥ Insert your text here</p>

        <p dir="ltr" style="margin: 0; padding: 0;">┗━───────────────╯</p>
    </div>
</div>

Give this a try and see if the padding problem is resolved in the final version

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

code for slide toggling a div that closes when clicked again

I'm fairly new to jQuery and I have this code that shows multiple content in the same container, only displaying one at a time while hiding the rest. However, I also want to add functionality so that if you click on the same button for an active cont ...

jqueryhtml

AJAX delivers results by returning HTML code

Despite attempting various solutions from multiple sources, including this one, I still can't pinpoint the exact issue in my code. Here is a snippet of my code: $(document).ready(function() { $("#botname").blur(function() { $.ajax({ ...

jqueryhtmlajax

Only Chrome supports the combination of Flexbox and overflow:hidden

My left sidebar's content is not following the overflow:hidden rule in browsers other than Chrome. Instead of being limited to 300 pixels of the .container div, it extends in Firefox, IE, and Edge. Any ideas on how to fix this issue? Check out this l ...

htmlcssflexboxoverflow

Shifting a division using insertAfter

Hey there! I'm having a bit of trouble using the insertAfter function. In each product in my store, I need to position an "add to cart" button after the price. This is the code I tried: <Script type="text/javascript" > jQuery(document).read ...

javascriptjqueryhtmlcss

Steps to remove a row from a table in a ReactJS component

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

javascripthtmlreactjs

Clicking the button will make it jump

I recently created a landing page for my BTEC Media coursework, but I encountered an issue with a button. Whenever I click on my call-to-action button, it inexplicably increases in length. I've attempted adjusting the max-width to auto and tweaking m ...

htmlcsscss-position

Navigating a series of HTTP requests with VBA and saving the retrieved data in Excel 2010

I have a total of 5 Excel files that I currently use with WinHttpRequest to extract data into them. My goal is to consolidate all the requests into a single VBA script, loop through them, and store the data sequentially on one sheet. However, I am facing ...

htmlexcelvbaweb-scraping

Which particular files should be included such as CSS and JavaScript?

After downloading bootstrap4, I'm unsure which css, js, or other files are necessary to include in order to make my form Bootstrap ready. My current task involves creating a form in CakePHP 3. Click here for more information on how to create a form ...

csscakephpbootstrap-4cakephp-3.0

How can a logo be adjusted in a bootstrap navbar when the browser is resized or when the user zooms in or out?

I have been struggling for the past 4 hours to find a solution to scale an image when the browser is resized. The website I am working on uses bootstrap and the image is located in the navbar-brand section. Typically, navbar-brand is used for a logo, but i ...

csstwitter-bootstrap

Ways to troubleshoot and fix the 500 Internal Server Error

Why am I receiving a "500 Internal Server Error" when making an ajax call? What could be causing this issue and how can it be fixed? ...

htmlajax

When the OnSubmit function is called, it triggers three other functions and then verifies the return types. However, one of the functions is failing to be

Creating a form that collects user input, and upon submission triggers the check_three_func() function <form method="post" action="register_action.php" id="register_form" name="register_form" onsubmit="return check_three_func()"> <br> &l ...

javascriptphpcssajaxbootstrap-4

Allowing users to submit content in a textarea field by pressing the enter key in

<td> <textarea name="message" id="message" rows="1" style="padding: 10px;margin-left: 12px;border-radius: 10px; margin-right: 0px; width: 430px;"></textarea> <td style="padding-left:0px"> <a title="Send" id="sendB ...

javascriptjqueryhtml

Showing a single item from an array using ngFor in Angular 2 is a simple task that can be

When there are multiple elements in an array on my website, the template is structured like this: https://i.sstatic.net/SChtZ.png I need a button to navigate to the next element of the array and display only one set of data at a time. The user should be ...

htmlarraysangularngforangular-ng-if

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

htmlcsswhitespaceviewport

Using React to insert a link with JSX variables

When inserting normal HTML elements with React variables in JSX, there are a few ways to go about it. One option is to use the dangerouslySetInnerHTML attribute or you can utilize a package like html-react-parser from npm. The following code demonstrates ...

javascripthtmlreactjsjsx

designing a dropdown menu in HTML

I'm attempting to customize the icon for an HTML select menu using fontawesome icon fonts. My current code looks like this: <select> <option value="1">1</option> <option value="2">2</option> <option value= ...

htmlcssselectfont-awesome

When the window size is reduced (smaller than a page width), the layout of the page becomes distorted

Check out my cool header: <head> <link href="/css/header.css" rel="stylesheet" type="text/css"> </head> <body> <div id="background"><img src="/multi/background.jpg" width="100%" height="100%" alt=""&g ...

htmlcssbackgroundsizewidth

Automatically shift focus after being focused on

I recently created a piece of jQuery code for a mobile website. Whenever I tap on the delete button, it erases the input and directs the focus to another input area. However, it then automatically loses focus after using the focus() method. $(document). ...

jqueryhtml

Bug in Click Behavior of HTML5 Canvas on Webkit Browser Versions Below 535 for Android Native and iOS5 Safari

Recently, I encountered a peculiar bug in Android where positioning a canvas element on the Native Android Browser (WebKit 534.4) using css position:absolute; top:10px; left:100px; resulted in the duplicated Canvas being rendered to the browser while ignor ...

javascriptcsshtmlcanvasmobile-webkit

Building a Navigation Menu in Vue.JS Using Bootstrap Styles

Greetings! I had previously developed a Menu for my Vue 2 project. Upon creating a new Vue 2 project (with plans to migrate to Vue3), I proceeded to import my Menu, which consists of HTML and CSS. Unfortunately, it seems that the implementation is not wor ...

cssvue.jsmenuvue-component