CODEWITHSUNDEEP
htmlcss
user2991837
user2991837

Reputation: 798

How to get links to have same height as font-size?

Links have a greater height than the font-size.

For example a line of text with font-size: 50px has a height of 50px. Yet the link inside the line of text has a height of 68px (there is no padding or margin on the link).

I presume the clickable area around the link has to take into account all the ascenders and descenders of the typeface. And this is why it has a greater height than the font-size.

Hence if the line-height of the text is set to 1em (in this case 50px) and there are several lines in a list the links overlap. Using display: inline-block or block doesn't work as the clickable area on the links is still greater height than the 50px, and so they overlap the text above.

The tightest line-height I can get is line-height: normal, but this gives my lines a height of something like 1.3em. Surely it must be possible to have a line-height of 1em or less, without links overlapping?

nav {
  font-size: 50px;
  line-height: 1em;
}

nav li {
  background-color: green;
}

a:link { color:rgb(0, 0, 0); text-decoration:none; display:inline-block; }
a:visited { color:rgb(0, 0, 0); text-decoration:none; display:inline-block; }
a:hover { color:rgb(128, 128, 128); text-decoration:none; display:inline-block; }
a:active { color:rgb(128, 128, 128); text-decoration:none; display:inline-block; }
<nav>
  <ul>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="ethical-design.html">Ethics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Upvotes: 0

Views: 133

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12113

display: inline-block seems to work fine here...

Regarding the clickable area, if you set the height of the anchor to the same 50px as the font-size and follow @skobaljic's advice on using overflow: hidden, as well as setting the height of the enclosing li to 50px, you can get the effect I think you're after...

Note that this will clip the descenders; note how the j in Projects is slightly truncated.

nav {
  font-size: 50px;
  line-height: 1;
}

nav li {
  background-color: green;
  height: 50px;
}

a {
  text-decoration: none;
  display: inline-block;
  background-color: pink;
  height: 50px;
  overflow: hidden;
}

a:link {
  color: rgb(0, 0, 0);
}

a:visited {
  color: rgb(0, 0, 0);
}

a:hover {
  color: rgb(128, 128, 128);
}

a:active {
  color: rgb(128, 128, 128);
}
<nav>
  <ul>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="ethical-design.html">Ethics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Upvotes: 1

Sarthak Kuchhal
Sarthak Kuchhal

Reputation: 360

set the font-size for the tag in your css file to be 50px

 a {
    font-size: 50px
    }

Upvotes: -1

Related Questions