Expanding the padding of a span element without displacing the text inside

I'm looking to enhance a span with highlighted text, complete with some padding, while ensuring the surrounding text in the div stays put. Currently, the padding seems to work vertically (with the edge of my span overlapping lines above and below) but not horizontally.

Below is my CSS code:

.highlight {
    background:rgba(255, 255, 0, 0.5);
    font:Helvetica;
    padding:4px 6px 4px 6px;
    border:3px solid rgba(0, 0, 0, 0.5);
    border-radius:24px;
}

For reference, here's the full jsfiddle: http://jsfiddle.net/u2rksh9u/1/

If you toggle the span by clicking within the div, you'll notice that the selected text and other text on the line shift slightly.

Is there a way to make the left and right edges of the span overlap adjacent text instead? I want to be able to apply these highlights without causing the text to move around on the screen.

htmlcsspadding

Answer №1

To offset the positioning, utilize negative margins.

.highlight {
    background:yellow;
    border: 2px solid red;   
    padding: 0.25em;
    margin: 0 calc(-0.25em - 2px);
}

Check out the fiddle here

Answer №2

Check out this link

To make up for the variation in padding and borders, you can use negative left/right margins

Here is the CSS code to achieve that:

margin:0 -9px;

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

How can I prevent dataTable resizing?

Is there a solution to prevent datatable resizing? For instance, when the default number of rows per page in the datatable is set to 10 rows. If you input 13 rows into the datatable, it will be divided into 2 pages - with 10 rows on the first page and 3 ro ...

javascripthtmldatatable

Can you guide me on creating a horizontal scrolling feature using HTML, CSS, and React?

Struggling to create a horizontal scrolling component similar to Instagram stories? Here's what I've attempted so far: .scroller{ height: 125px; width: 300px; background-color: blue; overflow-x: scroll; overflow-y: hidden; } .itemC ...

htmlcssreactjsfrontendhorizontal-scrolling

What's the reason for switching from a custom tab icon to a React icon?

I've encountered a strange issue while working on my app - the tab icon keeps changing from the one I've set to the ReactJS icon whenever I navigate between different routes. I have linked the icon correctly in my HTML file, so I'm not sure ...

javascripthtmlvue.jsvuejs2

Exploring the World of Images with Javascript

I'm currently working on creating a slideshow using HTML and JavaScript. My goal is to have the image change each time I press a button that I've established (see code below). After reviewing my code multiple times, I still can't figure out ...

javascripthtml

The concept of Nested DIVs and their impact on Element Height

Trying to divide this page into blocks with checkbox options in a 4x3 layout. The issue is that setting the "columns" to 100% height makes it 100% of the parent's parent, not the parent div. Any suggestions? <div id="left" style="width:50%;height: ...

htmlcss

What could be causing this text to not center properly on mobile devices?

Here is the main content. There are no alignment commands in the CSS or HTML. Check out the jsfiddle: https://jsfiddle.net/9t4afmx3/ Any idea why it's left-aligned on mobile devices? <body> <p align="center"><img src="Screen Shot 20 ...

htmlcss

I need assistance in utilizing my PHP variable UserNameID to remove the specific user's row from the database

I want to give users the option to delete their account from the database with a simple button click on my php forum. See the code snippet below: <div class="btn-group"> <button style="width:200px" type="button" class="btn btn-primary"> ...

phphtmlmysql

I am looking to automatically add a line of HTML text to the notifications list without requiring the user to manually refresh the page

Having trouble articulating the correct term or language I need, making it difficult to search. Q: How can I push a line of text from the server side to the user? I am developing an MVC 4 application using asp.net and c# in .net4. One page will feature a ...

htmlajaxasp.net-mvcupdatepanelpush

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

javascriptphphtmlmysqlforms

Java - Changing Font Size in HTML JTextPane with CSS Styling

When utilizing the following code snippet: Action sizeAction = new StyledEditorKit.FontSizeAction(String.valueOf(size), size); The button associated with the action adds the HTML tags: <FONT SIZE="5"> My text here </FONT> Utilizing these ta ...

javahtmlcssactionfont-size

Exit PopUp malfunctions and fails to function correctly

Hey everyone, I'm having an issue with my exit PopUp. It was working fine initially, but now it doesn't appear again when I scroll down the site page. Can someone please help me figure out what's going wrong? Sorry for any confusion, and tha ...

phpjqueryhtmlcsspopup

Is there a way to access data from a database using ajax and php?

I am attempting to verify if a field exists in the database before submitting a form. To achieve this, I have added the keyup event to the field to fetch data from the db using ajax. Below is the code snippet that I have added where the form is: $(docum ...

phpjqueryhtmlmysqlajax

Is there a way to use CSS to make a div expand as much as it can?

I am attempting to accomplish the following; Do you think this is achievable? ...

htmlcss

Utilizing a database for storing information from a website, such as usernames, passwords, responses, comments, and more

Can you link a website to an Access database? I currently use an Access database in Visual Basic and I want one database for all my applications. Is this possible? If so, does anyone have any code or examples to share? ps: This is for a school project, so ...

phphtmlvisual-studio-2010ms-access

Receiving a null value when using getElementById

I am attempting to read and display a text file, but the Chrome console is showing an error: caught TypeError: Cannot read property '0' of undefined FinanceDashBoard.html:22" I'm not sure where I am going wrong? The code I am using is: & ...

javascriptjqueryhtml

"Ensuring Proper Alignment of Labels and Inputs in Bootstrap for Varying Column

I'm encountering alignment issues with a large form that I'm working on. I have two columns at the beginning of the form where some rows occupy half of the width while others take up the full width. However, the problem arises with the alignment ...

csstwitter-bootstraptwitter-bootstrap-4

Font modification is unsuccessful in Vue-Material

Here is a snippet from my App.vue file where I encountered an issue with changing the font in the md-tabs component, taken from . The CSS line: background: #42A5F5; works perfectly fine, but this one does not: color: #E3F2FD; App.vue: <template> ...

cssvue.jsvuejs2componentsvue-material

Executing a C++ application within a web browser

I'm looking to integrate my C++ program that generates random sentences from a word bank into my personal, low-traffic website. Ideally, visitors could click a button and see a new sentence displayed on the page. What would be the easiest way to accom ...

c++htmlwebcgiscripting-language

Changing the background color completely

Need help with CSS! I have two divs, one with a background color of #000 and the other with a transparent PNG image as the background. I want to override the background color with transparency from the PNG file so that the background doesn't cover th ...

htmlcss

Employing ajax with dynamically created buttons in PHP

I'm struggling to figure out what to search for in this situation. I've tried piecing together code from others, but it's just not working for me. My ajax function successfully retrieves data from a database through a php page and displays ...

javascriptphpjqueryhtmlajax