I have a span element with some text in it. I want the text to have a solid background color as well as start/end each line with the same amount of padding.
This jsfiddle shows the problem: http://jsfiddle.net/VwsQg/
I found this very similar question: Add padding at the beginning and end of each line of text, but i need some space between each line as well.
This image illustrates the result I'm trying to accomplish:
Thank you in advance.
When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).
The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0 .
Padding is used to create space around an element's content, inside of any defined borders.
This can be done without using JavaScript or an extra element for each line.
<span class="marker"><span class="marker"><span class="marker">
consectetur adipiscing elit. Nam at sem eu ligula porttitor iaculis volutpat
non lacus.
</span></span></span>
.marker {
background: #f77;
padding: 3px 0;
position: relative;
left: -10px;
line-height: 30px;
}
.marker .marker { left: 20px; }
.marker .marker .marker { left: -10px; }
See how it works on fiddle 3tP8m.
Note: An ancestor of .marker
element should have proper padding
to contain this element correctly.
All credits of this technic goes to Artem Polikarpov. See his original advice: “How to mark up the text on flexible bottom layer” (in Russian).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With