Неровное вертикальное выравнивание текста в блоке?

Question

[Andrei Popov]

Если присмотреться видно что текст выравнивается немного ниже центра по вертикали
(это происходит из за того что вертикально блок текста выравнивается по центральной линии заглавной буквы)
Есть ли способ это исправить? Желательно без костылей

Comments

[Rustam Bainazarov]

Это называется высотой строки. Можете поиграть с её значением. Либо же padding'ами на em подогнать.

Answer 1

[abasiuk]

Прописать line-height для елемента с текстом, по идеи line-height: 1 должно красиво смотрется) в крайнем случае уже паддинги

Answer 2

[Andrew Garfield]

line-height, если правильно понял.

Comments

[Ankhena]

Кнопка это один тег, зачем 2?

[Andrew Garfield]

А причем тут кнопка?
Я показал, как вертикально выровнять текст в блоке.

[Ankhena]

Andrew Garfield, высота и line-height задаются одному элементу. А так же вся остальная стилизация.
Если, например, захочется задать рамочку #btn могут получится неприятности. У p margin от рождения, но это не меняет дела, они могут быть и благоприобретенными.

https://jsfiddle.net/cu2t57ry/

[Andrew Garfield]

Ankhena, Не совсем вас понял. Ясно что при добавлении рамки родителю, p съедет вниз, но это все решается одним свойством margin: 0 . Разве не так?

[Ankhena]

Andrew Garfield, все эти свойства нужно задавать одному и тому же элементу, а не разбивать на два.

Потому, что если это p переедет в другое место, то стили должны остаться с ним. Как-то криво написала. Но, наверное понятно. Потому что это одна сущность.

[Andrew Garfield]

Ankhena,
Так будет правильнее. Верно?
https://jsfiddle.net/krm7cyw4/

[Ankhena]

Andrew Garfield, ага!!

[Andrew Garfield]

Ankhena, Спасибо, что объяснили.