Avatar of TechComposer
 asked on

HTML / Image spacing problem

Alright, I'm pulling my hair out here...

Here is a page I'm having a problem with: http://www.fmgrinding.com/blank.html

See the spaces between the images in the navigation bar?

Now, here's a page without those spaces: http://www.fmgrinding.com/blank2.html

The ONLY difference that I can find between these two pages is the fact that the source code first (blank.html) is formatted for readability (indented, etc.) and in the second one, the source code for the navigation bar section is all run together.  I've tried fixing this through CSS, etc.  It seems that the only option I have is to remove all that whitespace, making the code impossibly difficult to read.

Why is this?  I thought whitespace didn't bother HTML!  This problem replicates across various browsers.  Can anyone tell me what's happening here?

Thank you!
Web Languages and StandardsWeb DevelopmentHTML

Avatar of undefined
Last Comment
Valliappan AN

8/22/2022 - Mon
Valliappan AN

The white space does not matter is right, but I think the white space counts when it is put within places like anchor.

Check your whitespaces between tags like :
<a><img src="default/004_experience_normal.gif" alt="Experience" id="Experience" height="30" width="90"></a>

Otherwise, you can do formatting.

Hope that helps.

Yes, altering the anchor tags in this way does work.  I'd like a different approach though, if possible.  What do you mean by "do formatting"?

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.

Yes, white space characters does not bother HTML however you should be careful about "space"

HTML rendering engines strip off all white space characters but when they see consecutive whitespace characters (more then one space character for example), it keeps only one "space", render it on the canvas and remove the rest. Try this: Press SPACE BAR and TAB key several times between two words in your HTML file. Open the file in a browser. The result is a single space between words on the canvas of the browser. That's why you see a space between images when you format the code for readibility.

In your sample code, try to place as much enter/space/tab characters between ANCHOR or IMAGE tags. That makes no difference. Rendering engine places only one space between your images. Remove all white space between them and you'll get what you want
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Valliappan AN

'do formatting' - I meant that you can insert whitespaces and format the html, in other instances, where the whitespace does not affect the output.