Display standalone links as blocks

tldr: Use display block on standalone links to expand the clickable zone.

What I mean by standalone is links that have no surrounding text, typically ones inside headings or menu items.

They work OK without any particular styling, but they can be a bit quirky when they get displayed over multiple lines.

Try hovering your cursor between the lines of the following link, you should see a dead zone where clicking doesn’t do anything.

This is due to the default display: inline style that makes the clickable zone wrap each line individually but not covering the whole line height, resulting in a small gap in between.

Fixing this is super simple, just use display: block on the link:

With this fix, you also get the benefit of expanding the clickable zone everywhere around the text, up to the borders of the block.

A good starting point could be this rule targeting all links inside headings:

:is(h1, h2, h3, h4, h5, h6) a {
  display: block;
}