css link automatic margin to bigger link - html

Question

I've the following problem:
The a tags automatically align to the bottom of the bigger a tag.
I would like to know why and what i can do against it.
Here is my code:
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>

Answer 1

Do a vertical-align to your <a>
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
vertical-align:middle; //This line over here
}

Answer 2

You need the vertical-align css property.
You can either use vertical-align: middle; or vertical-align: top;
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
vertical-align: middle; /* <------- */
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>

Answer 3

You can add:
.btn{
vertical-align:top;
}
if you need to align them to the top.
The default value of vertical align is baseline, which means that the element will be aligned to the baseline of the parent element.
That's why in your case the other 2 links seems aligned to the bottom comparing to the first element, just because of different font-size.