Why do small spaces appear on my web pages?

Question

This may be a stupid question, but if there is a better or better way to do this, I would like to study it.

I came across this several times, including recently, when small spaces appear in the displayed version of my HTML page. Intuitively, I think that they should not be, because outside the text or entities the formatting of the HTML page should not matter, but, apparently, it is.

I mean this - I have a Photoshop file from a client about how they want their site to look. They want it to look mostly a pixel, perfect for the image in this file.

One of the places on the page calls up the menu bar, where each of them changes the bit on hovering, acts as a hyperlink, etc. This is one long bar in the Photoshop file, so a cheap and easy way to do this is to simply divide this segment into several images and then place them next to each other in the file.

So instinctively I put it this way (there is more, but that's the point)

<a href="page1.html"> <img src="image1.png" /> </a> <a href="page2.html"> <img src="image2.png" /> </a> <a href="page3.html"> <img src="image3.png" /> </a> 

etc.

The problem is that the images have this tiny space between them, which is unacceptable because the client wants this thing to be perfect for the pixel (and it just looks bad).

One way to get the correct display is to remove carriages between images

 <a href="page1.html"> <img src="image1.png" /> </a> <a href="page2.html"> <img src="image2.png" /> </a> <a href="page3.html"> <img src="image3.png" /> </a> 

Which makes the images go directly against each other (the desired effect), but it makes the line incredibly long and the code harder to maintain (it wraps here in SO and this is a simplified version - real long file names and JavaScript strewn to make it hang).

It seems to me that this should not happen, but it seems that the carriage return in HTML is treated as a small empty space. And this happens in all browsers, it seems.

Am I right or wrong in thinking that the two snippets above should do the same? And is there something I am doing wrong? Maybe save the file with the wrong encoding? Should I make each of these links a perfectly matched CSS element?

Answer 1

A space (including carriage return) is usually displayed as a space in all browsers.

You need to place the elements one by one, but you can use the trick:

 <a href="page1.html"><img src="image1.png" /></a><a href="page2.html"><img src="image2.png" /></a><a href="page3.html"><img src="image3.png" /></a> 

It also looks a little ugly, but still better than a single line. You can change the formatting, but the idea is to add carriage returns inside the elements, not between them.

Answer 2

I don’t know if your page has enough in common, but you can classify these a tags and put them all to the left, after which they get together no matter how your HTML code is formatted.

 <style> a.together { float:left; } </style> <a class='together' href="page1.html"><img src="image1.png" /></a> <a class='together' href="page2.html"><img src="image2.png" /></a> <a class='together' href="page3.html"><img src="image3.png" /></a> 

Answer 3

This part of the HTML specification - spaces are in the markup, so they are considered part of the document.

The only other options that you have, since you don't like formatting, is to break the html tags:

  <a href="..."><img src=".." /></a ><a href="..."><img src=".." /></a ><a href="..."><img src=".." /></a 

which is undesirable, in my opinion, either to create html dynamically - either using JavaScript, or using a template system and dynamic html.

Answer 4

The reason is simple: in HTML, empty space matters, but only once. Repeated empty space is ignored, only the first is displayed.

The only sure way to avoid this is how you did it without putting a space between the elements.

If the table layout is smaller than it is currently, you can use the zero border table with zero padding to align your elements when they are used on separate lines in the source code.

Answer 5

The behavior you demonstrated above is true, as the browser sees the carriage return as a space. To fix this, you can configure it like this:

 a { display: block; float: left; } 

Note that the above rule applies it to all links, so you can restrict the selector to only certain elements, i.e.:

 #nav a { display: block; float: left; } 

Answer 6

The way I handle this is to use an unordered list and make each image / link an element. Then use CSS to display each element in the line and place them to the left.

This will give you much more flexibility and make the inscription very affordable.

Answer 7

If you intend to use the tabbed interface on a website, make a big effort to get it right, and it will be useful. There are many websites with great examples of CSS tab implementations. Consider using one of them.

It has many CSS + Javascript / AJAX tabs. Or check out this set of simple CSS examples (in some styles). Lastly, check out this actually-pretty-cool tab-generator .