.htaccess produces a pre tag when inspecting the index.php in firefox

Building a minimalistic MVC and I need to have a (.htaccess) for routing purposes. I am using apache and virtual ports.

The index.php is visible but a pre-tag (not part of html source code) and its whitespace make the page to move down, as if there was a 250px margin on top.

For some reason the usage of (.htaccess) wraps the html code inside a pre tag, with consequences that the head content moves to the body area and adds whitespace between each line of meta/title/link tags.

Observations:

Removing the (.htaccess) brings the result of index.php back to normal, and the pre-tag is not visible from the browsers (view page source), the page start from top of browser as it should behave.

My index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="application/content/css/main.css">
</head>
<body>

  <div class="wrapper">
    <div class="top_banner">tb</div>
    <div class="content">c</div>
    <div class="navigation">n</div>
    <div class="bottom_bar">bb</div>
  </div>

</body>
</html>

My .htaccess file

RewriteEngine On
RewriteRule \.(css|js|png|jpg|gif)$ - [L]
RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA]
DirectoryIndex index.php

# Attempts to solve the problem with pre-tag.
#AddDefaultCharset UTF-8
#AddType text/html;charset=utf-8 html
#AddType text/plain;charset=iso-8859-1 txt
#AddType text/plain;charset=utf-8 text

My apache file (000-default-conf):

<VirtualHost *:100>
        DocumentRoot /var/www/mvc
</VirtualHost>

<Directory /var/www/mvc/versions/>
        Options Indexes FollowSymLinks
        AllowOverride All
</Directory>

The result html in the browser (view page souce):

<pre>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="application/content/css/main.css">
</head>
<body>

  <div class="wrapper">
    <div class="top_banner">tb</div>
    <div class="content">c</div>
    <div class="navigation">n</div>
    <div class="bottom_bar">bb</div>
  </div>

</body>
</html>

The firefox inspector HTML code

<html lang="en"><head></head><body><pre>



  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="application/content/css/main.css">



  <div class="wrapper">
    <div class="top_banner">tb</div>
    <div class="content">c</div>
    <div class="navigation">n</div>
    <div class="bottom_bar">bb</div>
  </div>



</pre></body></html>

Solution

In RewriteRule substitution path is relative, so apache try to guess, according to Apache documentation:

mod_rewrite tries to guess whether you have specified a file-system path or a URL-path by checking to see if the first segment of the path exists at the root of the file-system.

you should read rewriteRule description probably you have a file somewhere that add pre tag.