Heading with line-height less that 1 intercepts clicks outside of element borders

Question

I have an H1 element immediately after an anchor tag. For design purposes the line-height of the H1 element is set to '0.9'.

This makes the H1's computed height shorter, but the actual Text element inside the H1 seems to be overflowing and partially covering up the anchor tag, making it hard to click. (Tested in Chrome and Safari, the bottom two thirds of the link is un-clickable)

I've added borders to both elements here to show the boundaries, and selected part of the title in my browser so you can see how the overflowing text is covering the link:

I can fix this by setting overflow: hidden on the H1, but I'm wondering if there are any cleaner solutions.

a {
  border: 1px solid blue;
}

h1 {
  color: magenta;
  font-size: 120px;
  margin-top: 0px;
  line-height: 0.9;
  border: 1px solid magenta;
}

<a href="www.google.com">Link Covered By </a>
<h1>Title</h1>

See the problem in action here: CodePen

Please post the relevant code in a stack snippet here rather than just the codepen. — disinfor, Nov 12 '19 at 17:57
@EvikGhazarian The whole link is clickable for you? Which browser are you on? — Arian Khosravi, Nov 12 '19 at 18:04
@EvikGhazarian Thanks for the comments. It would help a lot if you read the question carefully before suggesting things. I've clearly stated that line-height is what's causing the issue. Also that it's not limited to Chrome. — Arian Khosravi, Nov 12 '19 at 18:18
chrome and firefox they read the line-height differently. line height is the multiplier of the font-size so when you set line-height to 0.9 chrome is giving the h1 the space needed for 120px * 0.9 = 108px which is causing it to overlap. either remove the line-height or try to customize it with numbers more than 1. Im here to help not to fight. I get no gain out of this hamvatan! — Evik Ghazarian, Nov 12 '19 at 18:42

score 1 · Accepted Answer · answered Nov 12 '19 at 19:25

1

I'm not too sure what you mean by "cleaner", but one trick you can use instead of hiding the overflow (which isn't ideal, because it might cut off diacritics) is to lower the h1's z-index, so that it is drawn behind the a rather than in front of it.

a {
  border: 1px solid blue;
}

h1 {
  color: magenta;
  font-size: 120px;
  margin-top: 0px;
  line-height: 0.9;
  border: 1px solid magenta;
  position:relative; z-index:-1; /* there you go. */
}

<a href="www.google.com">Link Covered By </a>
<h1>Title</h1>

answered Nov 12 '19 at 19:25

Mr Lister

45,515
15
108
150

1

another alternative is to simply add `position:relative` to `a` and no need for z-index – Temani Afif Nov 12 '19 at 19:27
Thanks @TemaniAfif! I like that better. Can you explain why that works though? – Arian Khosravi Nov 13 '19 at 20:14
1

@ArianKhosravi check this : https://stackoverflow.com/q/52694564/8620333 I wrote a detailed answer there explaining how position affect the painting order. – Temani Afif Nov 13 '19 at 20:17

Heading with line-height less that 1 intercepts clicks outside of element borders

1 Answers1