Jump to content

SPAN PECULARITY


debu200

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 comment
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 comment
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 comment
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:

<html><body><span>a</span>1<span>b</span>2<span>c</span>3<span>d</span>4<br><span>a</span>1<span>b</span>2<span>c</span>3<span>d</span>4<br><br>1234<br>1234</body></html>

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...