Below is the code snippet I am working with:
<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>
Here is a screenshot of how it currently appears:
I am looking for a way to add padding to the sides of the highlighted text. I have tried applying regular padding on the SPAN element, but it only affects the beginning and end of the sentence, not each line individually.
Does anyone have any suggestions or CSS3 code that could help achieve this?
After encountering some challenges, I managed to devise a practical solution with a reliable alternative for outdated browsers - incorporating dual CSS3 shadows onto the text lines:
span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
padding-bottom: 20px;
This isn't a definitive fix, but it does create extra space above the line break.
To properly style the spans, ensure that the surrounding "p" tags have padding applied. Since the "p" tag is a block-level element, any padding added to the top, bottom, or sides will be effective.
If you want to try using inline-block, go for it. Keep in mind that it may not be compatible with browsers older than IE8 (but there are workarounds available). Most other popular browsers should support it without any issues:
p span {
display: inline-block;
padding: 0 2em;
}
If you're looking for a quick solution, try incorporating the following into your style declaration:
span {
padding-left: 8px;
padding-right: 8px;
}
This can also be applied to "p" tags (and other elements) in place of "span".
At last, I have discovered a way to escape this misery. It worked like magic for me. Just click on the button located on the left side.
<p>
<button class="blankspace">
</button>
<span>
</span>
</p>
Now, style it using CSS:
.blankspace {
background: none;
opacity: 0.0;
outline:0;
text-decoration: none;
width: 2%;
height: 80%;
margin:0 auto;
float:left;
text-align:right;
padding:0%;
font-size:2px;
}
To simplify the solution instead of using two CSS3-shadows, just add display:block
By default, <span> is set to display:inline, which means that the borders and padding you applied do not affect its size properly. This results in only the first line being affected.
Changing display:inline to display:block on the <span> element will allow it to function like <p> and <div>.
For more information, check out this helpful explanation:
I'm facing an issue with aligning buttons and inputs in my code. The buttons are currently aligned with the labels, but I want them to be aligned with the inputs instead. I've tried using inline forms, but it's not working as expected. What ...
I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...
Having a div element that adjusts its height based on width to maintain aspect ratio, I aim to place this div within another while maximizing available space vertically and horizontally without any cropping. It seems that object-fit: contain, typically use ...
While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...
I'm interested in creating a website where links rotate around a circle, similar to this example: https://i.sstatic.net/103mx.jpg. The links will display different images and texts leading to various URLs. I want the images to form a unified rotation ...
Why is there a ReferenceError: Error message that says "manualEntry is not defined," appearing while trying to use the code snippet below in a Wordpress environment? <a href="#" onclick="manualEntry()">hide</a> <script ...
My Wordpress website is currently utilizing Superfish 1.5.4 to display menu items. The menu on my site includes several main menu items, which are clickable pages, and hovering over these main items should reveal sub-menu options. When I hover over a mai ...
I created a response system where users can reply to comments by clicking on the reply button. Once clicked, it triggers a function that adds @user at the beginning of their comment: $('#inputField').focus(); $('#inputField').text(&apo ...
Currently, I am tackling a project involving a website that is connected using PHP. The main function of the PHP script is to modify an HTML file stored on the server and then allow the user to download it. I attempted to use PHP DOM for this task but unf ...
I have a query regarding the shape of GtkScale. Specifically, I am interested in making my GtkScale resemble the one found in the levels window of Gimp. To clarify: a bar 3 triangles (representing shadows, midtones, and highlights) https://i.stack.imgur ...
In the corner of my webpage, I have three tabs: info, question, order. When I click on one tab header, only that tab should highlight. The info section includes two buttons that link to the question and order tabs. When these buttons are pressed, the respe ...
Is there a way to apply a style to the parent element when an input is in focus? input:focus { background-color:yellow; } For example, if we have the following HTML: <div class="foo"> <input type="text /> Hello </div> I ...
I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...
Check out Fiddle Example 1 View Fiddle Example 2 I'm wondering if someone can assist me in combining two separate result sets into a single query to avoid running multiple queries? PRODUCT_PAGE_ID PRODUCT_PAGE_NAME SIMILAR_PRODUCT SIMILAR_PRODU ...
I am having trouble with the positioning of a mat date-range-picker calendar inside a component. I have a menu component that calls another component called leave, which contains the mat date range picker calendar. The problem is that when I call the leav ...
Is there a way to ensure css isolation works properly when passing a class as an argument to a child component? In the following code snippet, I anticipated the child component would display in blue, but that's not happening. Parent.razor <div cla ...
My HTML code: <body data-spy="scroll" data-target=".dmu-top-nav" data-offset="50"> <header> <nav class="navbar navbar-toggleable-sm navbar-expand-md dmu-top-nav fixed-top" role="navigation"> <div class="container-fluid"> &l ...
Is there a way to automatically save the data selected in a drop down list without having to click on a save button? public ActionResult SelectFeedBack(int id) { YelloAdminDbContext db = new YelloAdminDbContext(); ViewBag.FeedBack ...
I am having an issue where my image is overlaying the text. I would like the text to wrap around the image and for any hidden text to appear on a different line. How can this be achieved? Here is the CSS code I am using: div.relative { position: relati ...
Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...