Unexpected white space in a nested <a> and <span> elements [duplicate]

Question

Below is my HTML and CSS code -

.screenReaderOnly { width: 1px; height: 0; overflow: hidden; font-size: 0; float: left; }

<p>Please click on this <a href="mailto:[email protected]">link <span class="screenReaderOnly">Opens in new mail window</span> </a>.</p>

In the output there is a weird white space between the word link and . - why is this happening? and how do I get rid of it?

make the a to be display: inline-block; (will try to find a better duplicate) — Temani Afif
– Temani Afif, Commented Apr 24, 2020 at 10:22
and don't repeat the same question (stackoverflow.com/q/61405265/8620333) even if you think that the duplicate isn't suitable — Temani Afif
– Temani Afif, Commented Apr 24, 2020 at 10:24

Fatih Aktaş · Accepted Answer · 2020-04-24 09:51:30Z

It happens because interpreters condense spaces and newlines into a single space. The easiest way to get rid of it is to condense everything in one line.

.screenReaderOnly { position: static; display: inline-block; width: 1px; height: 0; overflow: hidden; font-size: 0; float: left; }

<p>Please click on this <a href="mailto:[email protected]">link<span class="screenReaderOnly">Opens in new mail window</span></a>.</p>

Collectives™ on Stack Overflow

Unexpected white space in a nested <a> and <span> elements [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related