Question

I’m echoing a series of HTML elements using PHP. I’m using \n to cause code line breaks to make the source code more organized and legible.

For some reason, the use of \n in a specific location is causing a mysterious gap between the HTML elements. In firebug, this gap is not showing up as a margin, or padding, but rather just a gap.

Here is the PHP in question:

Note: As you can see, I have removed all of the PHP inside the tags as I’m pretty sure it is not relevant to this problem.

echo '<ul ... >'."\n";
while($row = mysql_fetch_assoc($result_pag_data)) {

    echo '<li><a ... >'."\n".
                '<img ... >'."\n".
          '</a></li>'."\n"; <---- THIS IS THE \n THAT SEEMS TO BE CAUSING THE GAP
}
echo '</ul>'."\n";  

Have you ever seen anything like this before, a presentation gap associated with PHP line breaks?
If so, what is the reason for it?

Is it really that important that I use \n in my code?

Answer 1

That’s normal. A \n line break has no meaning in HTML, so it’s interpreted as a space character. If you don’t want that gap, then eliminate the \n, or rewrite the html so it’s not relevant:

<li><a ...><img ...></a></li>

As a general rule, tags which can contain text should never have their closing tags on a line by themselves, for this very reason.

---

Following up on your ‘where to put \n’ question. This comes down to personal preference, but I tend to format my html like this:

<table>
<tr>
   <td><a href="some big long ugly url">
           <img ....></a></td>
</tr>

Since <tr> can’t contain any text on its own (in valid html), it’s ok to put on its own line. But the </a> and </td> are both tags that CAN contain text, so I put them right up against the end of the ‘text’ (the img tag in this case), so that the Phantom Linebreak Menance (coming soon to a starwars ripoff near you) can’t strike.

Note, of course, that my example does have a line break and indentation between the opening <a> and the <img> tag, so that’s another place where a “must be right next to each” other layout would cause a gap. If you need a series of things lined up smack dab against each other, than you basically can’t use line breaks anywhere in that section of the page.