jquery - H1下方莫名其妙的空间(边距？)

Question

出于某种原因，我在 this page 上的 H1 标签下方有大量空间| .删除 H1 后，多余的空间也将被删除，但我无法隔离导致此问题的代码。我使用 !important 应用了 0 的边距，但没有效果。

<div class="videoGallery large-12 columns">

    <h1>Fitness Videos</h1>

    <div class="videoPreviewBox">
        <a class="video1" href="#">
            <div class="videoPreview">
                <img class="videoPreviewImg" src="img/promo/groupFitness.jpg">
                <img class="playButtonHover" src="../img/playButtonHover.png">
                <img class="playButton" src="../img/playButton.png">
            </div>
        </a>
    </div>

这是CSS:

.videoGallery h1 {
  color: white;
  font-size: 24px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 24px;
}

div.videoPreviewBox {
  float: left;
  display: inline-block;
  width: 21%;
  margin: 0% 2%;
}

@media only screen and (max-width: 594px) {
  div.videoPreviewBox {
    width: 46%;
  }
}
@media only screen and (max-width: 300px) {
  div.videoPreviewBox {
    width: 96%;
  }
}

div.videoPreview { 
  position: relative;
}

img.videoPreviewImg {
  width: 100%;
  z-index: 1;
}

img.playButtonHover, img.playButton {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
}

div.videoPreview:hover img.playButton {
  opacity: 0;
}

div.videoPreviewBox p {
  margin: 2% 0% 4% 0%;
  color: white;
  line-height: 18px;
}

起初我认为问题可能是由 jQuery 插件 equalHeights 引起的，它用于使包含预览图像和描述段落的所有框具有相同的高度，但如果是这样的话，那么开放空间也会在两行之间重复。

非常感谢任何指点!

Answer 1

该元素的 min-height 内联样式为 184px。这显然会占用大量空间。

我相信它是由 equalHeights 插件添加的，您是这样调用的:

$(function(){ $('.videoGallery').equalHeights(); });