CODEWITHSUNDEEP
htmlcss
Silas Rosenkranz
Silas Rosenkranz

Reputation: 13

css link automatic margin to bigger link

I've the following problem:

enter image description here

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>

Upvotes: 1

Views: 33

Answers (3)

ByteHamster
ByteHamster

Reputation: 4951

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>

Upvotes: 0

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

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.

Upvotes: 0

brodizzle
brodizzle

Reputation: 21

Do a vertical-align to your <a>

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

Upvotes: 1

Related Questions