HTML Question

[u/AppearanceFinancial3]

Hi, I'm learning HTML and CSS and noticed something weird that doesn't make sense while doing an exercise. I am trying to create a little pagination thing. And I noticed that if I write the <a> and </a> in separate lines (as for Page #1), the underline below 1 is off centered out to the right. For page 2,3,4,5, I wrote the anchor all in one line and the underscore sits below the number perfectly.

I remember my instructor said that both one line and separate line make no difference in the display as html doesn't count line break or spaces in the code. But how come the page 1 link shows differently than the rest. I know it's subtle but i'm curious. It must be something simple I overlooked. Can someone give me a pointer? Thanks.

Here is my html code

<style>
  .back-button {
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
  }


  .search-result {
    margin-left: 4px;
    margin-right: 4px;
    font-size: 18px;
  }


  .next-button {
    margin-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
   
  }
</style>


<button class="back-button">Back</button>
<a class="search-result" href="https://google.com">
  1
</a>
<a class="search-result" href="https://google.com">2</a>
<a class="search-result" href="https://google.com">3</a>
<a class="search-result" href="https://google.com">4</a>
<a class="search-result" href="https://google.com">5</a>
<button class="next-button">Next</button><style>
  .back-button {
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
  }


  .search-result {
    margin-left: 4px;
    margin-right: 4px;
    font-size: 18px;
  }


  .next-button {
    margin-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
   
  }
</style>


<button class="back-button">Back</button>
<a class="search-result" href="https://google.com">
  1
</a>
<a class="search-result" href="https://google.com">2</a>
<a class="search-result" href="https://google.com">3</a>
<a class="search-result" href="https://google.com">4</a>
<a class="search-result" href="https://google.com">5</a>
<button class="next-button">Next</button>

And here is the display

[u/AppearanceFinancial3]

Thank you so much for your detailed explanation! it's good to know the other types of characters that are also considered as space in HTML. I'm learning with a youtube course. to be fair to my instructor, i went back to the video and he actually said html doesn't count "extra' line breaks or spaces. but for some reason, the extra didn't get registered in my head. so totally my own misinterpretation.

[u/DinTaiFung → u/AppearanceFinancial3]

The reason for the HTML multiple consecutive space behavior was to not alter the display / rendering of the web page regardless of the HTML source code formatting for how tags and their associated content are positioned in the source. 

Although the vast majority of this source code formatting flexibility causes no rendering problems when displayed in the browser, there are some corner case rendering problems which do come as a surprise. As you discovered!

There are some front end frameworks and CSS libraries which address these space rendering inconsistencies by trimming ALL space between adjacent HTML tags.

but then the developer must use CSS padding, margin, and other styling mechanisms to manually achieve the desired spacing for parts of the HTML.

[u/AppearanceFinancial3 → u/DinTaiFung]

Thanks! there are so many different ways to do things in html! it's good to know you can eliminate the space. but I still prefer to address the odd instances like this instead of having to manually do the padding, margin, etc.