PHP adds extra whitespace on require

Question

Consider the following code:

<div id="sidebar">
<?php
  require_once('/components/search.php');
  require_once('/components/categories.php');
?>
</div>

search.php and category.php are essentially the same structure - a div container with some specific contents. Nothing special here, pure HTML:

<div class="component">
<!-- blah -->
</div>

However, when inserted with require_once (or require / include etc), PHP adds whitespace above each element, pushing it down, identifiable as an empty text node in Chrome's Inspect Element tool (the whitespace disappears when this node is deleted)

Deleting all unnecessary whitespace from the sidebar script (making it a single line of code) doesn't fix it. And if I just replace the require_once lines with the contents of the components, the whitespace doesn't appear. So not sure why PHP is adding it on require. Any ideas?

Update

This one's still proving to be a weird one. I agree now that require_once does not seem to be the root cause as such. I decided to ignore the problem for a while and hope it would go away after I'd worked on it further. Alas, it remains, so I did bit more investigating. Checking the page source in the browser confirms that the code in question is indeed returned as a single long unbroken line http://pastebin.com/dtp7QNbs - there's no whitespace or carriage return between any of the tags, yet space appears in the browser - identifiable in the Inspect Element tool as empty lines between each <div class="component">

Does this help shed any more light on the issue?

Answer 1

Problem solved! This took forever to figure out. The short answer is that my php files were UTF-8 encoded. Changing this in Notepad++ to ANSI fixed it.

I only found the real cause of the problem by doing a character-by-character comparison of the output HTML - one output from where 'require_once' was used and one where the code was manually pasted in place.

In a visual comparison of the output, both appeared identical - same length, no extra/different characters. But when pushed through preg_split('//', $string), and looped through character by character, 3 extra "invisible" characters were revealed at the start of each require_once insert point. I idenitified these as the ASCII characters ï, » and ¿ (a double-dotted i, a right chevron and an upside-down question mark).

Changed the encoding to ANSI (I discovered this as the cause when I recreated one of the scripts in Notepad word-for-word and it did not suffer the same issue), and the extra lines have gone.

Answer 2

First, put <?php on the same line as the DIV:

<div id="sidebar"><?php

This gets rid of the whitespace before search.php.

Then make sure that search.php has no newline at the end, that's causing the whitespace between search.php and categories.php. Some text editors add a trailing newline by default, you may need to override this.

I just tried this, the output of php main.php is:

<div id="sidebar"><div class="component">
<!-- search.php -->
</div><div class="component">
<!-- categories.php -->
</div></div>

Answer 3

some time it happened because of white space after ?> on the class file, also or before <?php

Answer 4

The extra characters are the BOM (Byte Order Mark). So converting to UTF-8 without BOM was the real trick here. More info here: http://en.wikipedia.org/wiki/Byte_order_mark

Answer 5

I had the same problem and verified Kai's solution to change the format to ANSI but also found that "Encode in UTF-8 without BOM" also works. This comes up as the default format for new Notepad++ PHP files so one less conversion step.

It seems that use of the byte order mark file header in UTF-8 is not generally recommended. I verified that my installation of VS2010 was adding BOM when saving PHP files.

The following stackoverflow article explains nicely where the extra whitespace got inserted.

What's different between utf-8 and utf-8 without BOM?