0

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?

3

1 Answer 1

0

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.