OwlCarousel 网格图库中的神秘 gap/padding

Question

我想弄清楚为什么在 OwlCarousel 中这个投资组合网格库运行的每一行部分的底部都有一个奇怪的 gap/margin，请参见 http://www.samnorris.net/pfwip2/index.html[ 中的示例=16=]

我差点把我的头发弄得乱七八糟，已经在尝试调试开发人员工具中的问题，并且彻底研究了相关的CSS，但一直无法弄清楚是什么导致了这个不需要的padding/margin.非常感谢任何人可能提供的任何帮助来帮助我解决这个问题。 :)

我认为这与#work .item .rollover 有关，但我不确定到底是什么....

这是所有相关的（据我所知）代码：

 ///////////////////////////////////////////////////////////////////////////
 // Work slider
 ///////////////////////////////////////////////////////////////////////////

 var $workslider = $("#workslider");

 if($workslider.length){
  $workslider.owlCarousel({
   loop : true,
   autoplay: true,
   autoplayTimeout: 4000,
   nav : false,
   dots : false,
   items : 11,
   transitionStyle : "fade"
  });
 }

/* ==========================================================================

  WORK

========================================================================== */

#work.paddingstandard {
  padding-bottom: 0px !important;
}


/* ---- isotope grid---- */

#portfoliogrid .item {
  width: 20%;
  float: left;
  cursor: pointer;
  overflow: hidden;
  padding-bottom: 0px !important;
}

#portfoliogrid .item.width2 {
  width: 40%;

}

#portfoliogrid img {
  width: 100%
}

/* Item rollover */

#work .item .rollover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 15px;
  text-align: center;
}

#work .item .rollover:before {
  content: "";
  position: absolute;
  height: 50%;
  width: 50%;
  left: 25%;
  top: 26%;
  opacity: 0;
  margin-top: 40px;
  transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
  transform: rotateZ(-45deg);
  -webkit-transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
  -webkit-transform: rotateZ(-45deg);

}

#work .item.width2 .rollover:before {
  width: 25%;
  left: 38%;

}

#work .item .rollover .centerContainer {
  opacity: 0;
  height: 100%;
  transition: all 0.3s 0.1s;
  transform: rotateZ(-5deg);
  -webkit-transition: all 0.3s 0.1s;
  -webkit-transform: rotateZ(-5deg);

}

#work .item .rollover .centerContainer a {

  font-family: "Montserrat";
  font-size: 1.250rem;
  font-weight: bold;
  letter-spacing: -2px;
  color: #FFFFFF;
  display: block;
  text-transform: uppercase;
  text-decoration: none !important;

}

#work .item .rollover .centerContainer .title {
  font-size: 2.8rem;
  line-height: 2.8rem;
  margin-bottom: 15px;
}

#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1;
  margin-top: 0px;
  transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  -webkit-transform: rotateZ(0deg);

}

#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
  opacity: 1;
  transition: all 0.3s 0.6s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.6s;
  -webkit-transform: rotateZ(0deg);

}

/* WORK OPEN ANIMATION */

@keyframes turn {
  0% {
    transform: rotate(45deg);
  }

  15% {
    transform: rotate(135deg);
  }

  25% {
    transform: rotate(135deg);
  }

  40% {
    transform: rotate(225deg);
  }

  50% {
    transform: rotate(225deg);
  }

  65% {
    transform: rotate(315deg);
  }

  75% {
    transform: rotate(315deg);
  }

  90% {
    transform: rotate(405deg);
  }

  100% {
    transform: rotate(405deg);
  }

}

#workLoader {
  position: absolute;
  z-index: 10000;
  -webkit-transition: all 0.8s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

}

#workLoader .iconloader {
  position: relative;
  z-index: 20;
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 100%;
  width: 100%;

}

#workLoader .iconloader:after {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
  border: 4px solid #FFFFFF;
  transform: rotateZ(45deg);
  animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -webkit-transform: rotateZ(45deg);
  -webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -ms-transform: rotate(45deg);

}

#workLoader.width2 .iconloader:after {
  width: 25%;
  left: 38%;
}

#workLoader .front, #workLoader .back {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}

#workLoader .front {
  text-align: center;
}

#workLoader .front img {
  width: 100%;
  opacity: 0.2;

}

#workLoader .back {
  background-color: rgba(20, 20, 20, .95);
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);

}

#workLoader .back #wrkclosebtn {
  position: fixed;
  top: 10px;
  right: 20px;

}

#workLoader .back .fa-times {
  font-size: 2rem;
  cursor: pointer;
  color: #5f5f5f

}

#workLoader .back .fa-times:hover {
  color: #FFFFFF
}

.scale100 {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  transform: perspective(1000px) rotateX(-180deg);
  -webkit-transform: perspective(1000px) rotateX(-180deg);

}

#workdetailcontainer.darkBackground {
  padding-top: 40px;
}

/* FIX IE 9/10/11 */

.IE #workLoader {
  transition: all .8s !important;
  transform: none;
}

.IE #workLoader .front, .IE #workLoader .back {
  transition: all .8s !important;
}

.IE #workLoader .back {
  transform: perspective(1000px) rotateX(180deg) !important;
}

.IE #wrkclosebtn {
  display: none;
}

.IE .scale100 #wrkclosebtn {
  display: inline;
}

.IE .scale100 {
  transition: none !important;
  transform: rotateX(0deg) !important;
}

.IE #workLoader.scale100 .back {
  transform: perspective(1000px) rotateX(0deg) !important;
  z-index: 10;

}

.IE #workLoader.scale100 .front {
  transform: perspective(1000px) rotateX(-180deg) !important;
}

.IE9 #workLoader {
  background-color: green;
  opacity: 0;
}

/* ==========================================================================

  WORK DETAILS

========================================================================== */

#workdetail {
  padding: 40px 0;
}

#workdetail h1 {
  color: #FFFFFF;
  line-height: 4rem;
  margin-bottom: 35px;
  margin-top: 0px;
  font-size: 4rem;
  text-align: left;
}

#workdetail #detailImg img {
  width: 100%;
}

#workdetail .workDouble #detailImg {
  margin-bottom: 35px;
}

#workdetail p, #workdetail #details span {
  color: #FFFFFF;
}

#workdetail #details {
  margin-bottom: 35px;
  font-size: 0.9rem;
}

#workdetail #details span {
  font-family: 'Montserrat';
}

#workdetail #details li {
  color: #CCC;
  margin-bottom: 5px;
}

#workdetail .button.tint:hover {
  color: #141414;
  background-color: #FFFFFF;
}


/* ==========================================================================

  ISOTOPE FILTERS GENERAL

========================================================================== */

.isotopeFilter {
  margin-bottom: 30px;
}

.isotopeFilter a {
  font-size: 1.250rem;
}

.isotopeFilter .is-checked {
  color: red;
}

<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Work section
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<section id="work" class="paddingstandard">
    <div class="container">
        <h2 class="appear" data-animation="translatefrombottom">WORK</h2>
        <!-- Description -->
        <p class="aligncenter appear">Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc.</p>


        <!-- Isotope Filter -->
        <nav id="portfolionav" class="isotopeFilter aligncenter appear">
            <a href="#" data-filter-value="*" class="is-checked">ALL</a>
            <a href="#" data-filter-value=".graphic" >GRAPHIC</a>
            <a href="#" data-filter-value=".slider">IMAGE SLIDERS</a>
            <a href="#" data-filter-value=".video">VIDEO</a>
        </nav>
    </div>

    <div id="portfoliogrid">
        <!-- Begin item -->
        <div class="item width2 graphic">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-1.html">CREATIVITY SPLASH</a>
                        <a href="work-detail-1.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <!-- Item Image -->
            <img src="img/work/work-double-1.jpg" alt="Portfolio" />
        </div>
        <!-- End item -->

        <div class="item manager" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-2.html">IRRIGATE YOUR MIND</a>
                        <a href="work-detail-2.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-1.jpg" alt="Portfolio" />
        </div>

        <div class="item graphic"  data-url="article.html">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-3.html">DOMOTIC</a>
                        <a href="work-detail-3.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-2.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-4.html">JOURNEY TO THE LAND OF TEA</a>
                        <a href="work-detail-4.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-3.jpg" alt="Portfolio" />
        </div>

        <div class="item graphic" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-5.html">FUTURE OF COMMERCE</a>
                        <a href="work-detail-5.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-4.jpg" alt="Portfolio" />
        </div>

        <div class="item manager" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-6.html">CORPORATE DESIGN</a>
                        <a href="work-detail-6.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-5.jpg" alt="Portfolio" />
        </div>

        <div class="item graphic" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-7.html">PHOTO STUDIO</a>
                        <a href="work-detail-7.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-6.jpg" alt="Portfolio" />
        </div>

        <div class="item width2 slider" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-8.html">LOOKING FOR AWESOME IDEAS</a>
                        <a href="work-detail-8.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-double-2.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-9.html">APP MARKET</a>
                        <a href="work-detail-9.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-7.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-10.html">DATA STORAGE</a>
                        <a href="work-detail-10.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-8.jpg" alt="Portfolio" />
        </div>

        <div class="item width2 video">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-11.html">VIDEO TIMELAPSE</a>
                        <a href="work-detail-11.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-double-3.jpg" alt="Portfolio" />
        </div>

        <div class="item developer" >
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="work-detail-12.html">CLEAN DESIGN</a>
                        <a href="work-detail-12.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <img src="img/work/work-single-9.jpg" alt="Portfolio" />
        </div>

    </div><!-- end "portfoliogrid"-->
</section>

Answer 1

space 是由您的 html 代码中的 white-space 引起的。您可以通过应用...

display:block;

...或...

float:left;
height: auto;

到#portfoliogrid img声明，在style.css:4218。
我个人更喜欢第二种方案。

作为旁注，您应该快速查看一下您的控制台。一个名为 glitch 的 library/plugin 似乎输出了一些错误。我在 Chrome 和 Firefox 中测试过。

Answer 2

所有带有class .item的DIV都是绝对定位的并且有一个固定的top位置导致了这个偏移。

但所有这些样式都是内联 - 在它们的 DIV 标签内。显然（因为它是响应式的）这些设置是由脚本动态分配的。在较小的宽度下，它可以工作，但在大屏幕上，脚本中存在一个缺陷，导致这些像素偏移。（即似乎该脚本中有一个小错误）

OwlCarousel 网格图库中的神秘 gap/padding

Mysterious gap/padding in OwlCarousel grid gallery

html

javascript

css

jquery

owl-carousel