|
HTML Tip:
Beware of the Carriage Return
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Be careful where you put carriage returns within your HTML documents. This can sometimes lead to unwanted white space in your page.
In theory HTML doesn't pay attention to white space within your source document. In practice, your browser will interpret a carriage return as a single character of white space.
Take the following HTML source as an example:
You might think this would result in the word "hello" being displayed twice with identical rendering. In reality the second "hello" will be rendered with extra white space between each letter, as shown in the image below.
The extra space is added by your browser to prevent adjacent words on different lines from running together. This behavior is consistent across most versions of all the major browsers. We've seen this behavior in Netscape Navigator 4.02, Navigator 3.01, Internet Explorer 4.0, Explorer 3.0 and even Lynx 2.5.
Unless you are aware of this effect, it can lead to unintended consequences. Consider this example:
Line 1: <img src="/logo_left_v2.gif" border=1>
<img src="/logo_right_v2.gif" border=1>
Line 2: <br>
Line 3: <img src="/logo_left_v2.gif" border=1>
Line 4: <img src="/logo_right_v2.gif" border=1>
|
This HTML source shows two separate images that should be rendered adjacent to each other. Line 1 of this code places both image tags on the same source line. Notice that your browser will display these images with their borders touching, as shown below.
Lines 3 and 4 show the same source, only with a carriage return inserted between the image tags, breaking the source up over two lines. This causes your browser to insert a space between the images, as shown below.
This effect of this isn't necessarily bad. We use this in the NetMechanic logo to force a little separation between the images. But if you don't know about this HTML quirk you can spend many frustrating hours tracking down the source of that little gap!
|
