Line-height смешает текст в кнопке, почему?

Question

[lavezzi1]

Здравствуйте. Во многих дизайн системах и стайлгайдах вижу, что ширину кнопки задают через padding, а вот высоту через height и line-height. Второе, очевидно, нужно для выравнивание иконки по вертикали. Но у меня проблема, когда я добавляю line-height к своим кнопкам, текст приподнимается. Особенно это видно когда добавляется иконка. Проблему конечно решает display: inline-flex; все становится идеально. Но хочется понять все же как решить проблему обычным способом.

Может я что то упустил когда смотрел как сверстаны разные примеры.

Для наглядности продемонстрировал проблему: codepen.io/anon/pen/wJZRmd?editors=1100

Comments

[Павел]

codepen.io/anon/pen/zZXeBO?editors=1100 более того, оно еще меняется, в зависимости от указанного типа значения Line-height.

[Павел]

и высоту лучше на задавать. Лучше иметь многострочную кнопку с нормальным line-height и верхним/нижним padding, чем вылезший текст как в кружке CSS IS AWESOME.
И лучше не в пикселях.

[lavezzi1]

Павел: если высоту не задавать то кнопка будет иметь высоту типа 33px или 41.

[Danila]

lavezzi1: используй вертикальные паддинги вместо фиксированной высоты

[lavezzi1]

Данила: тогда кнопка будет иметь высоту типа 33px или 41.

[Максим Тимофеев]

lavezzi1: а

типа 33px или 41.

- это плохо?

[lavezzi1]

Максим Тимофеев: естественно. Когда например инпут или любой другой элемент 40px, а кнопка рядом 41px - вот красота то будет.

[Максим Тимофеев]

lavezzi1: Ну так сделайте их одинаковыми, в чем проблема-то? И везде используйте не px а относительные единицы.

[Сергей delphinpro]

Код самой примитивной кнопки из моей постоянной практики:

$button-sizes: (
    normal: (
        font-size: 14px,
        height: 32px,
    ),
    medium: (
        font-size: 14px,
        height: 44px,
    ),
    large: (
        font-size: 15px,
        height: 56px,
    ),
);

@function getButtonSize($property, $size) {
  @if map_has_key($button-sizes, $size) {
    $button-size: map_get($button-sizes, $size);
    @if map_has_key($button-size, $property) {
      @return map_get($button-size, $property);
    } @else {
      @warn "Undefined size property: #{$property}";
    }
  } @else {
    @warn "Undefined size: #{$size}";
  }
}

@mixin button-size($size: normal) {
  $font-size: getButtonSize(font-size, $size);
  $height: getButtonSize(height, $size);
  $lines: lines-for-font-size($font-size);
  @include adjust-font-size-to($font-size);
  height: $height;
  $vertical-padding: ($height - $base-line-height - 2) / 2;
  padding-top: $vertical-padding;
  padding-bottom: $vertical-padding;
}

%button {
  background: $brand-dark;
  border: 1px solid $brand-dark;
  color: #ffffff;
  display: inline-block;
  font-family: $font-family-sans-serif;
  font-size: rem(14px);
  font-weight: 400;
  height: 32px;
  line-height: 30px;
  padding: 0 1.5em;
  vertical-align: middle;
  user-select: none;
  border-radius: 2px;
}

.btn {
  @extend %button;
  @include button-size(normal);
}

Если вы думаете, что верстка кнопок - это просто, то вы ошибаетесь =)

[lavezzi1]

Максим Тимофеев: лучше сделать кнопкус нормальными кратными размерами чем переделать тысячи блоков. Но как все таки правильно сделать я понять не могу.

[Сергей delphinpro]

lavezzi1: line-height в css - это высота строки.
значит line-height + padding-top + padding-bottom + border-top-width + border-bottom-width = height
Отсюда можно определиться как вы будете задавать размеры кнопок.
line-height обычно задан. остаются паддинги-бордеры и высота. Если вы задаете высоту и бордер, то паддинги нужно посчитать из вышеуказанного равенства.

[Максим Тимофеев]

Сергей:

Если вы думаете, что верстка кнопок - это просто, то вы ошибаетесь =)

Я такого не говорил. Но я готов утверждать, что убрать 2 px не представляется проблемой.