CODEWITHSUNDEEP
php
stefmikhail
stefmikhail

Reputation: 7125

PHP code line break `\n` causing gap between elements

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?

Upvotes: 0

Views: 1818

Answers (4)

Marc B
Marc B

Reputation: 360732

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.

Upvotes: 3

mario
mario

Reputation: 145482

In that particular case the newlines are used to prettify the html source, keep it readable via view-source. That's quite common actually. (Yet redundant.)

As said by the other answers, it does not have meaning normally. Albeit this can be overriden via CSS and the attribute (which we can assume is not the case here):

white-space: pre-line;

Upvotes: 1

David Schwartz
David Schwartz

Reputation: 182779

You should only output a newline where you in fact want a newline in the output. In HTML, a newline is whitespace, just like the space character.

Upvotes: 0

Jon
Jon

Reputation: 437434

The whitespace is translated into (empty) HTML text nodes, which take up some space (you can test this by walking the DOM). There is no solution to make these disappear that I know of other than removing the whitespace from your HTML in the first place.

Of course it's not only \n that would cause this behavior; spaces or tabs would do exactly the same as well.

Upvotes: 1

Related Questions