Menu
I have four elements which are displayed as buttons. Two them are <button>s, one is an <a> and one is an <input type="submit">.
The text of the <a> is ever so slightly offset vertically relative the others, and I can't figure out why. This occurs in Chrome, Firefox, Safari and IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<style>
*{
margin:0;
padding:0;
border:0;
border-collapse:collapse;
border-spacing:0;
font-size:inherit;
font-style:inherit;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight:inherit;
text-decoration:none;
color:inherit;
background-color:transparent;
list-style-type:none;
}
button,
.button,
input[type=submit]{
cursor:pointer;
padding:10px;
margin-bottom:10px;
box-sizing:border-box;
border-radius:5px;
background-color:#eee;
line-height:24px;
height:48px;
display:inline-block;
vertical-align:middle;
text-transform:uppercase;
letter-spacing:2px;
background-color:#69c;
color:#fff;
font-weight:bold;
text-align:center;
font-size:10px;
transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
button:hover,
.button:hover,
input[type=submit]:hover{
background-color:#7ad;
}
</style>
</head>
<body>
<button>Foo</button>
<button>Bar</button>
<a class="button">Baz</a>
<input type="submit" value="Yar" />
</body>
</html>I used window.getComputedStyle on Bar and Baz and then used vimdiff to compare the outputs. These were the only differences between the two:
#bar{
align-items: flex-start;
perspective-origin: 23.5625px;
transform-origin: 23.5625px 24px;
-webkit-logical-width: 47.125px;
width: 47.125px;
}
#baz{
align-items: stretch;
perspective-origin: 23.1875px;
transform-origin: 23.1875px 24px;
-webkit-logical-width: 46.375px;
width: 46.375px;
}
Neither has perspective nor transform applied, so those should be irrelevant.
Any thoughts?
838
The text of the <button> is aligned in the center, but for the <a> is aligned at the top. The vertical-align applies to the element itself only, not to the text within the element.
The text will be center aligned within the line. So if the line-height matches the height of the element (minus padding), than everything is centered.
So the line-height should be height - padding-top - padding-bottom = 48px - 10px - 10px = 28px
button, .button, input[type=submit] {
line-height: 28px;
}
It's because the elements other than 'a' automatically center the content. Change the height, and you'll see they all stay centered except the anchor. So when you set the padding top, it's making them look the same, but it only works at a certain size.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
