While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initial version of the code on Code v.1 (JSFiddle) and see the result below:
However, once I removed the span tags, the vertical alignment appeared fine. You can check out the updated version of the code on Code v.2 (JSFiddle) and see the revised result below:
It's important to note that the preview window on JSFiddle may be misleading. When comparing Code v.1 and v.2, you'll notice that the positioning of the text relative to its background differs between the two versions: Code v.1 places the text at the bottom, while in Android Chrome, it appears at the top (as shown in the screenshot).
In addressing this issue, please keep in mind what I am not looking for:
- Solutions involving JavaScript - these are not suitable for my case.
- Fine-tuning the
paddingtag manually - the issue lies within thespantag itself, not in the padding.
Here is Code v.1:
.part_of_speech {
font-family: Verdana, Geneva, sans-serif;
color: #fff;
font-weight: 700;
border-radius: 0.3em;
padding: 0.1em 0.2em 0.1em;
font-size: calc(0.4em + 1.5vw);
}
.noun {
background-color: #2196f3;
}
// Remaining CSS classes
/* HTML Code Snippet */
<div class="part_of_speech">
// Span elements here
</div>Here is Code v.2:
.part_of_speech {
font-family: Verdana, Geneva, sans-serif;
color: #fff;
font-weight: 700;
border-radius: 0.3em;
padding: 0.1em 0.2em 0.1em;
font-size: calc(0.4em + 1.5vw);
display: inline-block;
/* NEW */
background-color: #2196f3;
/* MIGRATED FROM .partofspeech CLASSES BELOW */
}
/* Deleted partofspeech classes due to removal of <span> tags */<div class="part_of_speech">NOUN </div>