Links inside list items have a height greater than the list element - what's going on?

Question

I have a nav containing a list of links. The list has a line-height: 1em. However the links have a height greater than 1em and overlap the preceeding list item, making it hard to click the items.

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  font-size: 50px;
  line-height: 1em;
}

nav li {
  background-color: green;
}

nav a {
  background-color: pink;
}

<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>

This can be seen more easily if I add margin-bottom to the nav li. The links (pink) have greater height than the line-height of the list items (green):

How do I get the links to have the same height as the list items? So that there is no overlapping?

Note. there is no padding on the links, so I don't know why they are larger. It doesn't make any difference if I add height:1em to the nav a. I've tried display:inline-block - which makes the pink background the same height as the green background, but strangely the links are still clickable just above and below the pink background! The clickable area isn't confined to the pink background.

NEW INFO

Links have a greater height than the font-size.

The size of the link is in no way influenced by the line-height.

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 is set to 1em the links overlap. Using display: inline-block displays the pink background as being the same height as the green background, but, (strangely) the clickable area is still larger than the 50px pink background height.

Unless there is a way to constrain the height of the link to the height of the font-size, then I will have to increase the line-height to account for this difference.

This JS Fiddle shows how the links are bigger than the font-size: https://jsfiddle.net/utqafz61/

... so if the line-height is the same as the font-size (1em) then the links will overlap making it difficult to click the right link. I first noticed this on this website: https://www.hassellstudio.com on the nav menu the links overlap. The mouse pointer can be on one link, but the link below is highlighted!

score 0 · Answer 1 · answered Aug 19 '20 at 19:53

the weird thing you were doing is to set the font-size of nav which is parent of ul li to 10rem that had made them bigger and also line-height is different from the actual height just se here line-height

example

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  /* font-size: 10rem;*/
}

nav li {
  margin: 10px;
  background-color: green;
}

nav a {
  background-color: pink;
}

<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>

@user2991837 does my answer helped you – Umutambyi Gad Aug 20 '20 at 12:54 — Umutambyi Gad, Aug 20 '20 at 12:54

FluffyKitten · Answer 2 · 2020-09-03T16:54:13.370

The problem is with the line-height in your nav, its not giving any space between the lines ()line-height: 1em is only allocating the same as the font-size (50px) so there is no room for the default space around the letters). You can make line-height larger (1.1em will works with your code above):

nav { line-height: 1.1em; }

Or just remove it altogether so it uses the default.

UPDATE:

If you cannot change the line-height from 1em, There are 2 fundamental problems that are causing issues to achieve this:

a tags are inline by default which makes it harder to work with margins & padding etc.
most fonts have extra space above and below so that the ascenders and descenders don't touch - this is down to the font glyphs themselves. Some fonts are "worse" than others.

You could force the link not to overflow outside the li using the following, and it will prevent the effect you see where the mouse looks like its over one link but actually activates another:

nav li {
    background-color: green;
    overflow: hidden;        /* this will crop off anything outside the element */
}

However depending on the font, this could crop a tiny part off the descenders of the letters.

Working snippet:

ul {
  margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    list-style: none;
}

nav {
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1em;
    font-size: 3rem;
    font-family: "Times New Roman";
}

nav li {
    background-color: green;
    overflow: hidden;
}

nav a { 
    background-color: pink;  
}

nav li:hover a{ 
    background-color: yellow;  
}

<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>

There isn't an easy way around this without changing the line-height (even slightly), but I tried various hacks to see if we could move the link text up a couple of pixels without moving the active link.

If it is possible for you to make the a to be display: block, then this seems to work:

nav li {
    background-color: green;
    overflow: hidden;
}
nav a {
  background-color: pink;
  display: block;
  /* tweak the values below to suit */
  margin-top: -2px;
  padding-bottom: 2px;
}

Solution: Use overflow:hidden, negative margin and padding as workaround this

The negative margin moves up the top of the link (which has the extra space) and the padding adds a little space for the descender. The òverflow:hidden on the li crops off the extra.

You can see it working below - Note I have greatly exaggerated the margin and padding to ensure that it works with no overlap, and I added a border around the links to make it clear where the link was:

ul {
  margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    list-style: none;
}

nav {
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1em;
    font-size: 3rem;
    font-family: "Times New Roman";
}

nav li {
    background-color: green;
    overflow: hidden;
}

nav a {
  background-color: pink;
  display: block;
  margin-top: -20px;
  padding-bottom: 20px;
  border:1px solid blue;
}

nav li:hover a{ 
    background-color: yellow;  
}

<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>

That's as good as I can come up with, hope one of those options is suitable!

I want the line to display close together. And I don't want the links to overlap — user2991837, Aug 19 '20 at 20:08
@user2991837 They are close together and not overlapping in my snippet... What exactly are you seeing when you run it? — FluffyKitten, Aug 19 '20 at 20:10
Thanks. I've run your code snippet. Looks fine. I note there is no line-height specified, so this might be why. I want to specifiy line-height. I've just created this JSFiddle and it all looks fine, so I can't understand why I'm having a problem on my computer. https://jsfiddle.net/tnv1ufso/ — user2991837, Aug 19 '20 at 20:15
@user2991837 That fiddle shows a huge gap between the li elements... I thought you wanted the mclose together? The code is different than your question but the pick is still jutting out a bit. Can you edit your question to show us an example of what you are trying to do? Its not very clear, especially as your fiddle has different code from your question. — FluffyKitten, Aug 19 '20 at 20:16
I do. I want the list items to be really close. This fiddle was simply done to show how the links were / do have a greater height than the list items / line-height. — user2991837, Aug 19 '20 at 20:19
@user2991837 See updated answer - this has the pink blocks perfectly aligned in the green. I've also added the margin so you can see the spacing between them. — FluffyKitten, Aug 19 '20 at 20:25
thank you, but this doesn't work as I want the line-height to be 1em (i.e. tight leading). As soon as the line-height is the same as the font-size the links overlap because for some weird reason the font links are taller than the font! — user2991837, Sep 01 '20 at 10:16
@user2991837 so you are using line-height to make the link tight to the text, is that right? Ok leave it with me, I’m only on my mobile now but I’ll take a look later and come up with something! — FluffyKitten, Sep 01 '20 at 10:38
Appreciate it. You can see from the open post that the links around the text have a greater height than the font-size and in turn the 1em line-height. I find this very odd — user2991837, Sep 02 '20 at 11:36
You can see here when using Times New Roman the links are bigger than the font-size https://jsfiddle.net/utqafz61/ — user2991837, Sep 02 '20 at 11:41
@user2991837 I've updated my answer - see the section under "Update". Let me know if either of these options work for you! — FluffyKitten, Sep 02 '20 at 13:39
Many thanks. As you pointed out overflow hidden crops off the top and bottom of ascenders and descenders. — user2991837, Sep 03 '20 at 14:32
@user2991837 that’s what line-height is for, so I’m afraid without changing it there’s no good way around it :) The only option is the negative margin hack in the last example. Did that work for you? — FluffyKitten, Sep 03 '20 at 14:42
I'll take a look. Thank you. I've posted another question around this as I find it baffling. See https://stackoverflow.com/questions/63726376/font-size-and-the-size-height-of-links-around-text — user2991837, Sep 03 '20 at 15:05

score 0 · Answer 3 · answered Aug 19 '20 at 19:57

0

Just add display: inline-block to your a elements.

Anchor tags are naturally inlined by user agent stylesheets which is what's causing your overflow.

answered Aug 19 '20 at 19:57

JHeth

7,067
2
23
34

As mentioned in the post this makes the background-pink the same heights as the green background, but the clickable area is still greater than the pink background – user2991837 Aug 19 '20 at 20:05
Oh, missed that. Just add overflow: hidden to your li and that problem goes away. – JHeth Aug 19 '20 at 20:07
Problem with that is that it cuts off the descenders, like the 'j' on Projects – user2991837 Aug 19 '20 at 20:09
That's because you have line-height set, removing that allows the inline-block element to fit it's contents. – JHeth Aug 19 '20 at 20:11
If you want space inside line items using padding on the anchor tag is a better solution than line-height. – JHeth Aug 19 '20 at 20:13

Links inside list items have a height greater than the list element - what's going on?

3 Answers3

example

Linked