This was one of the first things I noticed when I began using EE a little over one year ago.
This issue is talked about in a number of threads. One such is located here.
I’ve found that to achieve nice cleanly rendered mark-up you have to make the decision to approach writing your templates differently. I would assume, if you’re like me, I started by breaking down examples in the docs, from the forums, and any place I could find helpful information.
Most of these examples follow a specific formatting convention that is very easy to follow.
However, it also can lead to extra white space written to your rendered page.
Take for instance an opening and closing weblog tag, like
{exp:weblog:entries weblog="news" orderby="date" limit="5" }
{news_entry}
{/exp:weblog:entries}
When these tags are devoted to their own line in your template, the corresponding area in your rendered page will be an empty line.
Granted, a really basic example, but this is where I started to lean how the system was generating it’s output.
It’s conditionals that are the big culprit. Something like this, which has a bunch of white space written into it:
<div id="main_col">
<div>
{exp:weblog:entries weblog="{my_weblog}" sort="desc" limit="3"}
{if segment_2 == my_value}
<h1>{location_1}</h1>
{if:else}
<h1>{location_2}</h1>
{/if}
{/exp:weblog:entries}
</div>
</div>
I would write like this now:
<div id="main_col">
<div>
{exp:weblog:entries weblog="{my_weblog}" sort="desc" limit="3"}{if segment_2 == my_value}<h1>{location_1}</h1>
{if:else}<h1>{location_2}</h1>
{/if}<h2>title</h2>
<p> {section_image}<br />
{section_text}<br />
{/exp:weblog:entries}</div><br />
</div>
If you’re ok with your template being formatted differently, you can pretty much eliminate all the issues you’re currently observing.