Что вызывает это таинственное вертикальное смещение на этих кнопках?

У меня есть четыре элемента, которые отображаются как кнопки. Два из них: <button> s, один - <a>, а один - <input type="submit">.

Текст <a> всегда слегка смещен по вертикали относительно других, и я не могу понять, почему. Это происходит в Chrome, Firefox, Safari и 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>

Ответы

Ответ 1

Текст <button> выровнен по центру, но для <a> выровнено вверху. vertical-align применяется только к самому элементу, а не к тексту внутри элемента.

Текст будет выровнен по центру в строке. Поэтому, если line-height соответствует высоте элемента (минус заполнение), чем все центрируется.

Таким образом, высота линии должна быть height - padding-top - padding-bottom= 48px - 10px - 10px= 28px

CSS

button, .button, input[type=submit] {
  line-height: 28px;
}

Ответ 2

Это потому, что элементы, отличные от 'a', автоматически центрируют содержимое. Измените высоту, и вы увидите, что все они остаются центрированными, за исключением якоря. Поэтому, когда вы устанавливаете верхнюю часть дополнения, это делает их одинаковыми, но работает только с определенным размером.

Ответ 3

Что, поскольку line-height применяется к элементам, вы можете исправить его, изменив его:

CSS

button, .button, input[type=submit] {
   line-height: 30px;
}

Причина: поскольку вы устанавливаете padding для элементов, альтернативой вашему коду является удаление height и line-height, а затем использование только padding следующим образом:

<!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:18px 10px;
  margin-bottom:10px;
  box-sizing:border-box;
  border-radius:5px;
  background-color:#eee;
  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>

Ответ 4

Только объявление line-height влияет только на .button.

(Возможно, потому что остальные три элемента - это все элементы <form> и поэтому могут иметь стили CSS по умолчанию Shadow CSS, предварительно примененные к ним браузером?)

Какая бы ни была причина, применяя правильный line-height to .button, устраняет проблему.

Высота каждого элемента 48px

Что 48px включает в себя дополнение из-за box-sizing: border-box

Итак, чтобы поместить текст в вертикальную середину .button, вам нужно удалить верхнюю часть (10px) и нижнюю часть (10px) с высоты (48px).

48px - 10px - 10px = 28px

Решение:

Удалить

line-height:24px;

от

button,
.button,
input[type=submit]{
...
}

и добавьте

.button {
line-height:28px;
}

для стилей.

*{
  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;
  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 {
line-height:28px;
}

button:hover,
.button:hover,
input[type=submit]:hover{
  background-color:#7ad;
}

<button>Foo</button>
<button>Bar</button>
<a class="button">Baz</a>
<input type="submit" value="Yar" />