'HTML - random whitespace [duplicate]

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>
htmlwhitespaceremoving-whitespace


Solution 1:[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;
}

Solution 2:[2]

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>.

Solution 3:[3]

a:hover {
    text-decoration: none;
}

please add this css to your code

Solution 4:[4]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Josef Kati?
Solution 2 suha.kesikbas
Solution 3 Pinal Sukhadiya
Solution 4

Related Questions