How to use vertical-align correctly?

Question

css

I read the article on Vertical-align web-standards.ru/articles/vertical-align but I still can't align it. Here is my codepen.io/anon/pen/OyXgxd . intent. leveled and i can not. And what is interesting is that if you remove from .logo a vertical-align: middle; then it doesn't work on Intent. How to align both Intent and i?

Answer 1

Use padding , I beg you:

.logo a {
  color: #fff;
  padding: 6px 12px;
  background-color: #ea5a4b;
  display: inline-block;
  text-align: center;
}