Question

出于某种原因，this page上的H1标签下面有一大堆空间。删除H1时，会删除额外的空间，但我无法隔离导致此问题的代码。我使用！重要的边距为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(); });

Answer 2

我认为它与您的jQuery插件有关，H1的最小高度设置为148px，与视频预览div的高度相同。

更改此

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

到

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

如果这不起作用，请将H1放在div上方，并使用classGallery类。

Answer 3

试试这段代码：

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

请注意line-height和display属性

Answer 4

您min-height: 184px已内联<h1/>。删除内联样式，或.videoGallery h1 { min-height: 0 !important; }

Answer 5

使用FireBug检查您的页面后，我可以看到您有这个：

<h1 **style="min-height: 184px;"**>Fitness Videos</h1>

您需要将min-height更改为更小的值或将其全部删除并将其放入css中。

Answer 6

问题可能来自

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

您看到它在元素上方和下方有一个边距。当h1消失时，该边距可能会崩溃，但当它有一个要推离的元素时返回。

在H1以下无法解释的空间（边距？）

6 个答案: