Very Simple Image Problem.

[Hyperactive]

I have very simple question about two images. When i put two images like this:

<a href="#"><img src="pic.jpg" widht="24px" height="68px" border="0" align="top"></a>  
<a href="#"><img src="pic2.jpg" widht="24px" height="68px" border="0" align="top"></a>

and when i preview it, it shows little space between images.


How i can delete that space? I mean it shows images like this:


Thank you if you help

[tech_support]

Here's a hint.

/a>[GAP BETWEEN THE <a> TAGS]  [END Of GAP]

Try removing it.

[djr33]

In HTML, a line break in the code acts like a space on the page.

....</a><a href......
Rather than:
....</a>
<a href...

[Twey]

Only when adjacent to text. All white-space between two tags is ignored. If I remember correctly, white-space between tags and text should be ignored as well, but in practice most browsers display white-space that comes before a closing tag that's after text.

[Medyman]

You can also use css to clear any margin/padding space that might be there (inhereted from other elements).

<a href="#"><img src="pic.jpg" style='width:24px;height:68px;border:none;margin:none;padding:none;' align="top"></a>  
<a href="#"><img src="pic2.jpg" style='width:24px;height:68px;border:none;margin:none;padding:none;' align="top"></a>

[alexjewell]

And actually, you can replace the align="top" with CSS too. The images also require alt attributes in order to be standard, but that's beside the point.

[djr33]

My connection is being really weird, so I can't seem to upload a demo page, but there is very clearly a difference between these two blocks of code, Twey:

<img src="test.jpg" width="200" height="200">
<img src="test.jpg" width="200" height="200">


<img src="test.jpg" width="200" height="200"><img src="test.jpg" width="200" height="200">

Just like letters in text, each image is an object, so whitespace between tags does affect the layout.

I have no clue what the actual standards are, but in reality, that's what happens.

[jscheuer1]

Only when adjacent to text. All white-space between two tags is ignored. If I remember correctly, white-space between tags and text should be ignored as well, but in practice most browsers display white-space that comes before a closing tag that's after text.

My connection is being really weird, so I can't seem to upload a demo page, but there is very clearly a difference between these two blocks of code, Twey:

<img src="test.jpg" width="200" height="200">
<img src="test.jpg" width="200" height="200">


<img src="test.jpg" width="200" height="200"><img src="test.jpg" width="200" height="200">

Just like letters in text, each image is an object, so whitespace between tags does affect the layout.

I have no clue what the actual standards are, but in reality, that's what happens.

djr33 is right. Inline elements like span or img will show a space if they are on separate lines in the source code:

<span>a</span>
<span>b</span>

But not when they are on the same line:

<span>a</span><span>b</span>