What is the reason behind the <button>
always having its text vertically aligned, while an anchor tag with the same styles does not?
By "same styles" we mean that both elements have the same display, padding, line height, text-align, and vertical-align. However, once the tag is changed from <button>
to <a>
, the vertical alignment breaks.
This issue is quite puzzling. I even delved into the webkit-core to search for answers. I examined what styling the <button>
element has and replicated it here:
An individual mentioned that <button>
is styled differently, but in what way? Find out more here:
Button's text vertical align
Could someone clarify how exactly a browser renders a <button>
?