OwlCarousel 网格画廊中的神秘间隙/填充答案

【问题标题】：Mysterious gap/padding in OwlCarousel grid galleryOwlCarousel 网格画廊中的神秘间隙/填充
【发布时间】：2017-02-28 23:40:54
【问题描述】：

我试图弄清楚为什么在 OwlCarousel 中运行的这个投资组合网格库的每一行部分的底部都有一个奇怪的间隙/边距，请参阅http://www.samnorris.net/pfwip2/index.html 中的示例

我已经尝试在开发人员工具中调试问题，并且彻底检查了相关的 CSS，但一直无法弄清楚是什么导致了这种不需要的填充/边距。非常感谢任何人可以提供帮助我解决此问题的任何帮助。 :)

我相信这与#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>

【问题讨论】：

标签： javascript jquery html css owl-carousel

【解决方案1】：

该空间是由html 代码中的空格引起的。您可以通过应用任何一个来删除它...

display:block;

...或...

float:left;
height: auto;

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

附带说明一下，您应该快速查看一下您的控制台。一个名为glitch 的库/插件似乎输出了一些错误。我已经在 Chrome 和 Firefox 中进行了测试。

【讨论】：

谢谢，成功了！好吧，几乎……samnorris.net/pfwip2/index.html 现在第二行和底行之间只有一个非常薄的 1px 间隙？？奇怪的。已删除 HTML 中的任何空格，所以我不认为是这样......除非您碰巧有任何想法，否则会尝试自己弄清楚？是的，我知道 Javascript 错误... :) 一个小小的 WebGL 实验，仍在进行中。干杯。
差不多是什么意思？空间消失了，至少在 Chrome 中是这样。能否提供详细信息？
哦，你是对的.....它似乎只是在 Firefox 中。嗯，也许没什么大不了的。
确保您以 100% 的速度查看此内容 (Ctrl/Cmd + 0)。如果您想从根本上理解问题的原因，请查看clearly explained here。
是的，刚刚验证它是 100% 缩放...但仍然：iforce.co.nz/i/ytbmflny.sle.png 一定是代码中的另一个小怪癖。会继续挖掘。再次为您的帮助干杯，也会查看该链接。

【解决方案2】：

所有具有 .item 类的 DIV 都是绝对定位的，并且具有固定的 top 位置，这会导致此偏移。

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

【讨论】：