title: owl carousel 2 top value (element-style) always 24px
body: <p>I use owl carousel 2 on different pages. I used the same css and js everywhere.
  For some reason, when I load my page, the nav-buttons (prev and next) always get the inline-style top-value of 24px. I never declared a top-value of 24px anywhere in my js or CSS..</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div class="pdf-gallery"&gt;
          &lt;p class="headline"&gt;Lorem ipsum dolor sit amet, consectetuer&lt;/p&gt;
  
          &lt;div class="download"&gt;
              &lt;div class="image"&gt;
                  &lt;figure&gt;
                      &lt;a href="lightbox-imagegallery.html?image=0"&gt;
                          &lt;!-- image=2 als Übergabe an die Bildergalerie in der Lightbox; sorgt dafür, dass das richtige Bild geöffnet wird (beginnt mit 0) --&gt;
                          &lt;img src="img/content/image.jpg" alt="Alttext"/&gt;
                      &lt;/a&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="" class="title"&gt;Lorem ipsum dolor sit amet, consectetuer&lt;/a&gt;
  
                  &lt;p class="info"&gt;PDF deutsch | 123 kB&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="download"&gt;
              &lt;div class="image"&gt;
                  &lt;figure&gt;
                      &lt;a href="lightbox-imagegallery.html?image=1"&gt;
                          &lt;img src="img/content/content.jpg" alt="Alttext"/&gt;
                      &lt;/a&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="" class="title"&gt;Lorem ipsum dolor sit&lt;/a&gt;
  
                  &lt;p class="info"&gt;PDF deutsch | 123 kB&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="download"&gt;
              &lt;div class="image"&gt;
                  &lt;figure&gt;
                      &lt;a href="lightbox-imagegallery.html?image=2"&gt;
                          &lt;img src="img/content/thumbnail.jpg" alt="Alttext"/&gt;
                      &lt;/a&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="" class="title"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing&lt;/a&gt;
  
                  &lt;p class="info"&gt;PDF deutsch | 123 kB&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="download"&gt;
              &lt;div class="image"&gt;
                  &lt;figure&gt;
                      &lt;a href="lightbox-imagegallery.html?image=3"&gt;
                          &lt;img src="img/content/content.jpg" alt="Alttext"/&gt;
                      &lt;/a&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="" class="title"&gt;Lorem ipsum dolor sit amet&lt;/a&gt;
  
                  &lt;p class="info"&gt;PDF deutsch | 123 kB&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="download"&gt;
              &lt;div class="image"&gt;
                  &lt;figure&gt;
                      &lt;a href="lightbox-imagegallery.html?image=4"&gt;
                          &lt;img src="img/content/image.jpg" alt="Alttext"/&gt;
                      &lt;/a&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="" class="title"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing&lt;/a&gt;
  
                  &lt;p class="info"&gt;PDF deutsch | 123 kB&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="download"&gt;
              &lt;div class="image"&gt;
                  &lt;figure&gt;
                      &lt;a href="lightbox-imagegallery.html?image=5"&gt;
                          &lt;img src="img/content/image.jpg" alt="Alttext"/&gt;
                      &lt;/a&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="" class="title"&gt;Lorem ipsum dolor sit amet, consectetuer&lt;/a&gt;
  
                  &lt;p class="info"&gt;PDF deutsch | 123 kB&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is how I load the owl-carousel in js:</p>
  
  <pre><code>$j('.pdf-gallery').each(function () {
      var $slider = $j(this),
          opts = {
              responsive: {},
              smartSpeed: 800,
              loop: false,
              nav: true,
              navRewind: false,
              navText: ['', ''],
              onInitialized: function () {
                  $slider.find('.owl-dots, .owl-nav').wrapAll('&lt;div class="owl-controls"&gt;');
              },
              onResized: function () {
                  $slider.find('.download .image').setEqualHeight('auto');
                  $slider.find('.download .caption').setEqualHeight('auto');
              }
          };
  
      //Paging-Container
      $slider.find('&gt; div').wrapAll('&lt;div class="wrapper owl-carousel"&gt;');
  
      //responsive definition
      opts.responsive[0] = {items: 1};
      opts.responsive[mediaqueries.maxMobile] = {items: 2};
      opts.responsive[mediaqueries.softTablet] = {items: 3};
      opts.responsive[890] = {items: 4};
      if ($slider.parents('.wide, #full-width').length) {
          opts.responsive[mediaqueries.maxDesktop] = {items: 6};
      }
  
      if ($j('html').hasClass('lt-ie9')) {
          opts.responsive = false;
          if ($slider.parents('.wide, #full-width').length) {
              opts.items = 4;
          } else {
              opts.items = 3;
          }
      }
  
      //init
      $slider.find('.wrapper').owlCarousel(opts);
  });
  </code></pre>
  
  <p>And then I have a css for the prev and next button:</p>
  
  <pre><code>.owl-next,
              .owl-prev {
                  color: @darkBlue;
                  cursor: pointer;
                  font-size: 22px;
                  position: absolute;
                  text-decoration: none;
                  top: 2px; }
  </code></pre>
  
  <p>So I feel like my buttons should have the value top: 2px. But instead they always get an inline style of top: 24px which overwrites my top: 2px value.
  Is this an default value which is set somewhere? But why if I use the same code everywhere else?</p>