HTML - random whitespace

Question

I am creating a website in HTML and everything went well until something weird happened to my code. When I place 2 button side by side, a random horizontal line becomes visible. When I click on the button and hold it, the line becomes red. This has nothing to do with css, when I place the link to the css-file in comment, it still occurs.

When I look into the dev tools, there is an element called whitespace in it, but this is nowhere in my code.

When I search on the internet, the only thing that appears is how to add whitespace.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/main.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoeken op bedrijf</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/perSecotr.html">
          <button type="button">Zoeken op sector</button>
        </a>
        <a href="#">
          <button type="button">Zoeken op bedrijf</button>
        </a>
      </nav>
    </header>
    <div>
      <h1>Welk bedrijf wilt u zoeken?</h1>
    </div>
    <div>
      <form autocomplete="off">
        <input type="text" placeholder="Naam van het bedrijf..." id="companyname" required />
        <br>
        <button type="button" id="submit"> Zoeken </button>
      </form>
    </div>
  </body>

  <script src="./js/index.js" type="text/javascript"></script>
</html>

The whitespace _is_ in your code. You have a line feed followed by several spaces. Developer tools are showing it explicitly because it's relevant for layout. — Álvaro González, Apr 28 '22 at 11:49

score 1 · Accepted Answer · answered Apr 28 '22 at 11:45

1

This happens because you are using a tag which in default has a text-decoration set to underline.

To fix this you need add a css rule

a {
  text-decoration: none;
}

answered Apr 28 '22 at 11:45

Josef Katič

1,939
1
8
23

score 1 · Answer 2 · answered Apr 28 '22 at 11:50

1

The <a> HTML element (or anchor element) is underlined by default. It is wrong to put a <button> inside the <a> element. If you are only going to give a link, you should use a remove the <button>.

answered Apr 28 '22 at 11:50

suha.kesikbas

129
1
3

score 0 · Answer 3 · answered Apr 28 '22 at 11:47

0

a:hover {
    text-decoration: none;
}

please add this css to your code

answered Apr 28 '22 at 11:47

Pinal Sukhadiya

221
5

Lasma · Answer 4 · 2022-04-28T11:58:34.410

In addition to what is told above my comment for removing the text-decoration for the anchor tag, you might aswell want to change the way your buttons are created. It is not a good practice to have a button within anchor tag in terms of accessibility, and in general, it is illegal to be done that way :) I would suggest you to use either button either a tag alone. Source: https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5#:~:text=It%20is%20illegal%20in%20HTML5,button%20element%20inside%20a%20link.

HTML - random whitespace

4 Answers4