Whitespace after image is being displayed as link

Question

Given the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
  <body>
    <div style="background-color:red">
      <a href="1__mose_info.htm">
        <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
    </div>
    <div style="background-color:green">
      <a href="1__mose_info.htm">
        <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" />
      </a>
      <a href="1__mose.htm">
        1. Mose
      </a>
    </div>
  </body>
</html>

The first division gets displayed as I want it (no link underline before the '1'. but if i format my code like in the second div, the space before the 1 gets an underline for a link.

If you look closely, the link of the space before '1' is the link of the image, and not the link of the text. Is there an easier way to not have this space as part of the link?

[Edit after my two upvotes and selecting the prefered answer:]

So it is best practice to keep all html elements and/or text that counts into an anchor element at one line - at least the first word. I will try to keep this in mind when editing subsequent html source code

Thank you all. Wolfgang

You have a new-line between the opening of the `` tag and its first character; all white-space is condensed to a single space character, and that single space character is preserved (by design). If you don't want a space before the "1" then remove the spaces from the HTML. — David Thomas, May 14 '17 at 09:09

score 1 · Accepted Answer · answered May 14 '17 at 09:11

A line break counts as a space in HTML. You would need to change it to this to keep the same format:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div style="background-color:red">
        <a href="1__mose_info.htm"><img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
    </div>
    <div style="background-color:green">
        <a href="1__mose_info.htm">
            <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
    </div>
</body>
</html>

Take a look here for more on what you can do to overcome this if you are keen on the html formatting not affecting the display of your page: Removing whitespace between HTML elements when using line breaks

As mentioned below to @Garrett Kadillak answer, it seems to be the same... :-) — Wolfgang Roth, May 14 '17 at 15:45

score 1 · Answer 2 · answered May 14 '17 at 09:13

It seems that the spacing that you had was off. Here's the code with the two numbers lined up without the spaces in the hyperlink.

favorite Thanks for your edit! This edit will be visible only to you until it is peer reviewed. Given the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
  <body>
    <div style="background-color:red">
      <a href="1__mose_info.htm">
        <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a>
            <a href="1__mose.htm">1. Mose</a>
    </div>
    <div style="background-color:green">
      <a href="1__mose_info.htm">
        <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a>
      <a href="1__mose.htm">
        1. Mose
      </a>
    </div>
  </body>
</html>

It seems like you and @webbm answered the same solution, but i can only select one as answer — Wolfgang Roth, May 14 '17 at 15:44

Whitespace after image is being displayed as link

2 Answers2