When working with elements such as <p> or <h1>, I have encountered a situation where the line-height property is smaller than the font-size property. This causes the text inside the element to extend beyond its boundaries. Unfortunately, changing this would alter the design of the page.
While this might not be a problem on its own, it becomes problematic when I try to add a border (or an outline) around the element. In this case, the border wraps around the element itself rather than the text, resulting in a visually unappealing outcome.
Manually adjusting each border individually is an option, but this would be tedious and time-consuming, especially considering that I need to implement this on multiple areas of the website.
An alternative solution I considered is using display: inline. Although this approach does wrap the border directly around the text, it behaves unpredictably on elements with multiple lines of text.
You can see an example here.
Are there any other methods to ensure that the border aligns perfectly with the height of the text? I am open to suggestions involving both CSS and JavaScript solutions.