title: Moving carousel item to a new component produces weird space
body: <p>I'm using vue-slick-carousel in my app. I have the following code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div class=&quot;banner-container&quot;&gt;
        &lt;div&gt;
          &lt;VueSlickCarousel v-bind=&quot;settings&quot;&gt;
            &lt;div v-for=&quot;item in items&quot; :key=&quot;item.id&quot;&gt;
  
              &lt;!-- ALTERNATIVE 1 (WORKS) --&gt;
              &lt;div&gt;
                &lt;a href=&quot;abc&quot; target=&quot;_blank&quot;&gt;
                  &lt;img id=&quot;picture1&quot; src=&quot;./assets/carouse-item.png&quot; /&gt;
                  &lt;div class=&quot;position-relative&quot;&gt;
                    &lt;div class=&quot;banner-description&quot;&gt;
                      &lt;span class=&quot;banner-title&quot;&gt;
                        &lt;a v-bind:href=&quot;'#'&quot; class=&quot;header-anchor&quot;&gt;#&lt;/a&gt;
                        TITLE&lt;br /&gt;
                      &lt;/span&gt;
                      &lt;span class=&quot;banner-alternative-text&quot;&gt;
                        &lt;a v-bind:href=&quot;'#'&quot; class=&quot;header-anchor&quot;&gt;#&lt;/a&gt;
                        DESCRIPTION&lt;br /&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- ALTERNATIVE 2 (DOESN'T WORK) --&gt;
              &lt;!-- &lt;Child :item=&quot;item&quot;/&gt; --&gt;
  
            &lt;/div&gt;
          &lt;/VueSlickCarousel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>There are 2 alternatives. Alternative 1 works fine:</p>
  <p><a href="https://i.stack.imgur.com/bpsfA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bpsfA.png" alt="enter image description here" /></a></p>
  <p>Alternative 2 is basically the code under Alternative 2 extracted into a new component - <code>Child</code>. It produces this output:</p>
  <p><a href="https://i.stack.imgur.com/05P5T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/05P5T.png" alt="enter image description here" /></a></p>
  <p>I can't understand why just extracting the part of code into a new component changes the layout like that.
  The source code of the app is available at <a href="https://github.com/marcinjahn/vue-carousel-issue" rel="nofollow noreferrer">https://github.com/marcinjahn/vue-carousel-issue</a>.</p>