title: inline styling changes when custom component is used
body: <p>I have an Ionic app which has a permanent header on all pages with tabs. </p>
  
  <pre><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        &lt;span&gt;
          Home
        &lt;/span&gt;
        &lt;button ion-button icon-only small round [navPush]="createHuntsPage" &gt;&lt;ion-icon item-right name="add"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
        &lt;button ion-button icon-only small round [navPush]="profilePage" &gt;&lt;ion-icon item-right name="person"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  </code></pre>
  
  <p>Instead of that I created a custom component which has this same template and added it as with selector <code>my-header</code>. </p>
  
  <pre><code>@Component({
    selector: 'my-header',
    templateUrl: 'header.html'
  })
  export class HeaderComponent {
    constructor() {  }
  }
  </code></pre>
  
  <p>and i add ,<code>&lt;my-header&gt;</code> in my template. Everything works fine except for a small issue. The first approach added an inline style attribute which is missing when I use custom component.</p>
  
  <blockquote>
    <p>Without custom component</p>
  </blockquote>
  
  <pre><code>&lt;div class="scroll-content" style="margin-top: 56px; margin-bottom: 56px;"&gt;
  </code></pre>
  
  <blockquote>
    <p>With custom component</p>
  </blockquote>
  
  <pre><code>&lt;div class="scroll-content" style="margin-bottom: 56px;"&gt;
  </code></pre>
  
  <p>Why is this happening ? Is there any issues that can come with this approach ? I can fix this by adding <code>margin-top: 56px;</code> But I would like to know why this is happening? I have the tab on the bottom , if that has some thing to do with this.</p>