Unexpected white space in a nested and elements

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:XXX@XXX.XXX">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?

look here: https://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks — chriss, Apr 24 '20 at 09:54
make the `a` to be `display: inline-block;` (will try to find a better duplicate) — Temani Afif, Apr 24 '20 at 10:22
and don't repeat the same question (https://stackoverflow.com/q/61405265/8620333) even if you think that the duplicate isn't suitable — Temani Afif, Apr 24 '20 at 10:24

score 0 · Answer 1 · answered Apr 24 '20 at 09:51

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:XXX@XXX.XXX">link<span class="screenReaderOnly">Opens in new mail window</span></a>.</p>

Unexpected white space in a nested and elements

1 Answers1