CODEWITHSUNDEEP
jquerycssmargin
Brandon McPeak
Brandon McPeak

Reputation: 69

Inexplicable space (margin?) below H1

For some reason I've got a ton of space below the H1 tag on this page. When the H1 is removed, the extra space is removed, but I have not been able to isolate the code causing this. I applied a margin of 0 with !important and this had no effect.

<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>

And here is the 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;
}

I thought at first the issue might be caused by a jQuery plugin, equalHeights, which is used to make the all of the boxes containing a preview image and description paragraph the same height, but if that were the case then the open space would also be duplicated between the two rows.

Any pointers are very much appreciated!

Upvotes: 0

Views: 143

Answers (6)

Jon Paul Miles
Jon Paul Miles

Reputation: 44

The problem could be coming from 

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

You see it has a margin above and below the element. That margin may be collapsing when the h1 is gone but returned when it has an element to push off of.

Upvotes: 0

James Holderness
James Holderness

Reputation: 23001

The element has a min-height inline style of 184px. That's obviously going to make it take up a lot of space.

I believe it has been added by the equalHeights plugin, which you're calling like this:

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

Upvotes: 4

idipous
idipous

Reputation: 2910

Upon inspecting your page with FireBug I can see that you have this:

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

You need to change the min-height to something smaller or remove it alltogether and put it in a css.

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

You have min-height: 184px declared inline on your <h1/>. Either remove the inline style, or .videoGallery h1 { min-height: 0 !important; }

Upvotes: 0

Pieter
Pieter

Reputation: 1833

I think it has to do with your jQuery plugin, the min-height of your H1 is set to 148px, the same height as your video preview divs.

Change this

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

to

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

If this won't work, place your H1 above the div with class videoGallery.

Upvotes: 1

Nave Tseva
Nave Tseva

Reputation: 878

Try this code:

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

Notice the line-height and the display properties

Upvotes: 0

Related Questions