Jump to content


Recommended Posts

Hi,The span tag works in different way when arranged differently. For example, in the following code, the span tags are first arranged horizontally and then they are arranged vertically just by pressing enter while coding. <html><body><span>a</span><span>b</span><span>c</span><span>d</span><br><span>a</span><span>b</span><span>c</span><span>d</span></body></html>They display the content in different way. In IE (I test only in one browser) the width of the text displayed by the two codes is different. So far I know HTML ignores white spaces and line feeds given during coding by pressing enter. Can you tell why is it happening so?Regards.Debopriyo

Link to post
Share on other sites

This is very interesting to me as well. My guess would be that HTML recognizes the span element on a different line in the code but not as a line break as you would like for it to be. So in order to compensate for that, it spaces it differently.I know this sounds stupid but it's the clostest thing I can think of. I'll keep looking for an explaination.

Link to post
Share on other sites

HiI tried ur code in VS .NET the when I write the SPAN tag in next line then, it automatically changes in the horizontal manner with a single space between them.<span>a</span><span>b</span><span>c</span><span>d</span><br><span>a</span> <span>b</span> <span>c</span> <span>d</span>

Link to post
Share on other sites

Well, this shows that the extra space is caused by the browser's interpretation of the carriage return in the code and that it has nothing to do with the <span> tag itself:


Every browser interprets a return carriage in the code as a space. On a related note, that is why (in coding conventions I have specified in other posts) that I ALWAYS use a <br /> when I am done with a line. The infamous white space illustrated above is most commonwhen someone codes a page like this:

<table cellpadding="0" cellspacing="0"><tr><td><img src="xxxxxx.xxx"></td><td><img src="xxxxxx.xxx"></td></tr></table>

where a white space would seperate these images and annoy people to no ends.versus, this:

<table cellpadding="0" cellspacing="0"><tr><td><img src="xxxxxx.xxx"><br /></td><td><img src="xxxxxx.xxx"><br /></td></tr></table>

which will not produce a white space because the carriage return is removed and a <br /> is inserted to communicate to the browser that the line is all done.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...