I recently tried to implement text on an image following a tutorial I found at https://css-tricks.com/text-blocks-over-image/. Here is the code snippet I used:
.image{
position: relative;
}
h2{
position:absolute;
top: 200px;
left: 200px;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}
Upon running the code, I noticed that there are black marks at the end of the first line and beginning of the second line due to the added spacing. This was not present in the tutorial. How can I eliminate these unwanted marks caused by repeating padding? Any help would be appreciated.
Thank you.