0

Why does <button> always have its text vertically aligned but not.. Say, an anchor tag that is using the same styles?

Same styles meaning both have same display, padding, line height, text-align and vertical-align. But as soon as I change the tag from <button> to <a>, it breaks, text is no longer vertically-aligned

This is tough to figure out. I even went to check the webkit-core to find answers. I checked what does the <button> element has and copied it out. http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

This guy says <button> is styled differently but how? Button's text vertical align

Can someone tell me how exactly is a <button> is rendered by a browser?

Community
  • 1
  • 1
  • 1
    I think this is to complicate to anwser because you don't know how a browser was coded. So you have to live with the webkit documentation. – Norukh Apr 27 '15 at 09:42

1 Answers1

3

Were you going for something like this?

HTML

<button>...</button>
<br>
<a>...</a>

CSS

button {
    -webkit-appearance: button;
}
a {
    padding: 2px 8px;
    -webkit-appearance: button; 
}

Link to fiddle: Fiddle

Aruloci
  • 589
  • 4
  • 18
  • I'm pretty sure I said **text is no longer vertically-aligned**. Not the looks, because I have `-webkit-appearance: button` on my code as well. –  Apr 28 '15 at 08:50
  • @ Duane-Adam I'm not sure if I really understand what you are asking. – Aruloci Apr 28 '15 at 13:02