Using the <mark> tag in CSS for creating padding

Struggling to utilize the padding feature in CSS effectively with the HTML below, as it only pads the first word on the left side:

The current CSS code I have that's not working correctly:

mark {
  background-color: #89ce40;
  color: white;
  opacity: 0.89;
  padding-right: 5px;
  padding-left: 10px;
}
<div class="slide-content">
  <h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></span></strong></h1>
  <h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>

Also attempted to apply padding functions using 

.slide-content{padding-left: 10px;}

Is there a way to separate padding for each <mark></mark> section?

https://i.sstatic.net/52Y2s.png

^ This is the result with 

mark{padding right: 8px; padding-left 20px}
trying to pad each line on the left like the first word in each element

Managed to adjust the right-hand side padding by tweaking the mark element, but the issue persists on the left side, only affecting the first word in each string as opposed to the beginning of each <mark>

Realizing now that the padding is being applied on the line above, apologies for the confusion in my previous explanations of what I was attempting to do.

htmlcss

Answer №1

<mark> is classified as an inline HTML Element

When it comes to inline elements, their dimensions are not fixed to specific lengths but rather adapt to the content within. For elements that need specific dimensions, such as inline-block and block, adding display:inline-block or block can help achieve that.

Demo

mark {
  display:inline-block;
  background-color: #89ce40;
  color: white;
  opacity: 0.89;
  padding-right: 5px;
  padding-left: 10px;
}
<div class="slide-content">
  <h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark></span></strong></h1>
  <h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>

Answer №2

Afterincluding the <br> tag, my issue with padding above was resolved. Big thanks to @Sabbin for the assistance!

<h1 style="text-align: left;"><strong><mark>RELIABLE I.T. <br></mark><mark> SERVICES YOU CAN DEPEND ON</mark><mark></mark></strong></h1>
    <h2 style="text-align: left;"><mark>Allow us to aid in developing an I.T.<br></mark><mark> Optimization Strategy and <br></mark><mark> Define your technological<br></mark><mark> priorities</mark></h2>

mark {
background-color: #89ce40; 
color: white; 
opacity: 0.89;
padding-right: 5px;
padding-left: 5px;
}

Answer №3

By default, the <mark> element is an inline element, which means it is rendered in a single line. This can cause issues with padding in subsequent rows, as the padding is added at the end of the previous row.

There are several ways to address this problem.

One solution is to float:left all <mark> elements and add clear:both so they stack below each other.

mark {
   /*your code*/
   float:left;
   clear:both;
}

Another option is to change the <mark> elements to block elements, but this will make them take up the full width:

mark {
    /*your code*/
    display:block;
}

Using flex, you can achieve a similar result with the following code:

mark {
    /*your code*/
    display: flex;
}

Choose the method that works best for your needs.

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

Interactive preview of PDFs with pdf.js adaptation

How can I update my PDF preview when resizing the window? Currently, the canvas resizes but the PDF preview remains the same size. I am struggling to find a solution for this. var myState = { pdf: null, currentPage: 1, zoom ...

javascripthtmlcsspdfpdf.js

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

javascriptjqueryhtmltags

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

Challenges arise when trying to coordinate scrolling movements between a canvas element and the remaining content on the webpage

I'm currently stuck on a project involving a Three.js canvas with OrbitControls for interactive 3D visualization. The main issue I'm facing is the lack of synchronization between scrolling within the canvas and the rest of the page content. Whil ...

javascripthtmlcssthree.js

How can I retrieve the index of an element within a 2D array using JavaScript when the array is displayed on a webpage?

https://i.stack.imgur.com/GHx9p.png I am currently working on developing an Othello game board within an HTML page using Angular. The board itself is constructed from a 2D number array which I then display using the <table> tag on the webpage. Below ...

htmlarraysangular

click to save the document

My goal is to download a csv file when clicked, rather than having it open in the browser I attempted this code <a href="file.csv">download file</a> However, when I click the link, the file opens in the browser instead of downloading. Intere ...

phphtmlsave

What's the best way to expand the right side of .li following a left offset of -20px

My nested list structure looks like this... https://i.sstatic.net/sggVx.png What you see is a recursive ul/li setup... <div class="family d-block"> <span class="pb-2"> <small class="text-muted">Family:</small><br> < ...

htmlcsstwitter-bootstraplistbootstrap-4

Ways in which elements can be toggled through jquery or javascript?

There are various words listed below: word1 word2 word3 ... Every word in the list is linked to 1 to 3 examples. When a user clicks on a word, certain actions should take place. I want the examples to display when the associated word (e.g., word1) is c ...

javascriptjqueryhtmlcss

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css

Can a child element be positioned above its parent's y-scrollbar using CSS?

I have created a selection box using <ul> and <li> elements. Some of the list items are wider than the parent box, so I used an :after pseudo-element to overlay them with full content when hovered over. Everything was working perfectly, until ...

htmlcss

Unable to Change Navbar Color

Presented here is the code snippet for the navbar located in app/assets/views/elements: <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> ...

cssruby-on-railstwitter-bootstrap

Converting an HTML table into a visual image

I've encountered an issue. My task involves transferring an HTML table to a PDF using fpdf. Is there a way to transform an HTML table into an image (via URL link)? ...

phphtmlfpdf

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

As someone working in the analytics field, I often rely on CSS selectors to address various issues. Currently, I am faced with a task on a website where I need to determine whether a <p> element is hidden or visible. There are two possible scenarios: ...

javascripthtml

HTML template with three columns where the content spills over the edges, despite having a visible border and a height of 100%

I have a wrapper containing 3 divs: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"&g ...

htmlcss

Is there a way to prevent text from being automatically linked after using an <a> tag?

Whenever I attempt to input text into the div tag below, it mysteriously appears hyperlinked, even though there is no "a" tag enclosing it. HTML: <html> <head> <link href = "https://fonts.googleleapis.com/css?family=Work+Sans:3 ...

htmlcss

In Safari, my layout is disrupted by the mere mention of the word 'City'

There's something strange happening in Safari that I can't quite figure out. Here's how my layout looks in Chrome: https://i.sstatic.net/lPhnP.png But when viewed in Safari, it looks like this: https://i.sstatic.net/IMnQb.png For some r ...

htmlcssbootstrap-4web-frontend

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

htmlcss

The sticky footer in React shifts upwards when the page has minimal content

Having trouble with my web app's footer not staying at the bottom when there is minimal content on the page. I'm feeling stuck and unsure of how to proceed. Can anyone provide guidance on creating a footer that remains at the bottom of the page, ...

cssreactjs

How to use jQuery to target the second or any desired div element with a specific class

I'm having trouble with something seemingly simple Let's say we are looking for a class called .contentdiv, for example. I am trying to target the second or nth occurrence of the .contentdiv class in a document and retrieve the HTML of that spe ...

javascriptjqueryhtml

Attempting to showcase two lines within a single row on an html page

Currently, I am working on a project involving ASP MVC and Bootstrap where I need to display the regulation of a transformer in a specific format. This representation can be seen in the image below: https://i.sstatic.net/VzVcA.png My attempt to achieve t ...

htmlcsshtml-table