Currently experimenting with the following CSS:
.twrap {
position: relative;
display: inline-block;
padding: 0;
border: 1px solid red;
margin: 0 0 26px 0;
}
Implementing it in the HTML like so:
<div class="twrap">
<input type="text" id="textline" name="textline" value="some text">
</div>
Additionally...
<div class="twrap">
<textarea id="textbox" name="textbox">some other text</textarea>
</div>
While this method mostly achieves the desired outcome, it is not consistently successful on all web browsers. It seems to function properly on input type="text" fields, but there are discrepancies when it comes to textarea fields. Some browsers show a visible 4 pixel gap only at the bottom, while the top, left, and right sides remain consistent as intended.
Exploring browser sniffing to adjust the CSS solely for affected textarea fields has proven challenging, with recommendations strongly advising against this approach due to unpredictable results.
Attempts to normalize the CSS have been futile. Is there a reliable solution to achieve this consistency?
A demonstration can be viewed in this fiddle: https://jsfiddle.net/ogqaL62p/.