laravel - partials are inserting empty text into HTML - " "

Question

<div style="margin-top:-21px">
    @include('partials.header')
</div>

<div style="margin-top:-21px">
    @include('partials.navig')
</div>

<div style="margin-top:0px">
    @include('partials.footer')
</div>

Above HTML/Laravel code inserts partials into layout. Every time when I use partial, it will insert empty spaces into HTML output and causing ugly white-space (empty row) above the partial. That's why I am using margin:top:-21px, to hide empty row . But the problem is, that in Internet Explorer are not those white-spaces visible and therefore partials are shifted too much. Here is an HTML output and how empty row looks like:

I have no clue what can cause these white-spaces, it is not wrong margin of elements or something like that. Is there any solution or explanation for this?

Answer 1

This is because you are including partials in new row. Try including them in same row and it should fix your problem.

<div style="margin-top:-21px">@include('partials.header')</div>

Answer 2

Laravel doesn't insert blank lines. You should look at your partial files and make sure there are no blank lines / empty spaces at the beginning and at the end. You should also consider including those partials right after closing div and not in next line.

For example:

<div style="margin-top:-21px">@include('partials.header')</div>
<div style="margin-top:-21px">@include('partials.navig')</div>
<div style="margin-top:0px">@include('partials.footer')</div>

And when you put in those partials only the name of file, you will get the following output:

<div style="margin-top:-21px">header</div>
<div style="margin-top:-21px">navig</div>
<div style="margin-top:0px">footer</div>

As you see - no spaces, no blank lines.

Of course the trick with negative margin is the very wrong solutions, so you should analyze your partials and also change including those files to the method I showed here.

Answer 3

I found solution:

Problem was in encoding. Change from UTF-8 to UTF-8 w/o DOM made it.

Alternate solution is wrap partial into div with line-height:0 and div in partials set back to line-height:1.