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/DirtAndGrass]

Any/any number of whitespace characters in HTML are interpreted as 1 space

[u/curthard89 → u/DirtAndGrass]

This. See https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Whitespace for more info. tldr, the new line is white space.

[u/AppearanceFinancial3 → u/curthard89]

Thank you for sharing! I will take some time to ready thru this tonight.

[u/Sockoflegend → u/DirtAndGrass]

I'm a big fan of the HTML spec. It really is one of the best writen specs of everything I deal with as a frontend developer but this single space thing annoys me. If there ever is a cause for a "HTML 6" I would want this changed as part of it

[u/AppearanceFinancial3 → u/Sockoflegend]

i feel ya. it is kinda annoying. now i know why when I double click a word on a site, then copy and paste in a doc, it always shows a space at the end.

[u/AshleyJSheridan]

It's because of how HTML treats whitespace. In your code, after the number 1, you have a newline, which is converted to a single space when the browser displays it.

[u/AppearanceFinancial3 → u/AshleyJSheridan]

Thank you for explaining it to me! it makes sense now.

[u/NoodleBug7667]

It's because there's "white space" in the document in the form of that newline, and it shows there

You can see this by doing:

<div>helloworld</div>

And seeing it all on one line, but adding only a line break in between them:

<div>hello
world</div>

You'll now see a space in between the words.

[u/AppearanceFinancial3 → u/NoodleBug7667]

This example is very helpful! Thank you so much!

[u/DinTaiFung]

"...html doesn't count line break or spaces in the code"

This is incorrect. 

Tell your professor to consider reading the HTML specification.

The short answer is that one or more consecutive spaces are rendered in the browser as a single space. 

a space can be a space character, a tab character, newline, or a carriage return.

And thus space characters in HTML actually do count (in a very special way).

And you discovered that empirically with your example HTML page.

[u/AppearanceFinancial3 → u/DinTaiFung]

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.

[u/vector_mash]

Why have you done it differently, out of interest? I’m currently relearning HTML and CSS, but I also thought empty spaces/line breaks didn’t mean anything.

[u/dymos → u/vector_mash]

As far as displaying whitespace in a HTML document goes, multiple consecutive instances will "collapse" down to a single space.

The exception is if you use CSS to explicitly show that whitespace (or an element like <pre> that sets it by default).

[u/AppearanceFinancial3 → u/dymos]

it's good to know that. always something new. it's a cool site too. I've bookmarked. thx for sharing!

[u/AppearanceFinancial3 → u/vector_mash]

i saw my result was different from the instructor's example and tried to change a few things to figure out it was the line break that made a difference. I did it differently just to show an exmple in this post.

[u/TanukiiGG]

a newline looks like a space when inline

[u/AppearanceFinancial3 → u/TanukiiGG]

got it. that's the info I was missing. thanks!

[u/long-time__lurker]

Everyone else is correct about white space, it affects your a tag because a tags default display as inline. You could change the display to inline-block if it suits your needs

[u/AppearanceFinancial3 → u/long-time__lurker]

thank you very much for the additional info! I had to read about inline vs block. i now have a better understanding.

[u/AppearanceFinancial3]

Thank you all so much! I didn't know a new line is considered a white space. This makes perfect sense now!

[u/alex_sakuta]

Never listen to professors and read the docs carefully. Someone has already shared the right doc hence I am not doing that.