Extra white spacing under a div element

Question

I have been trying to read other people's solutions to the problem with bottom white spacing. Here's an equivalent version of my code. JSFiddle As you hover over an image, there is a 5px white spacing between the bottom of the image and the bottom of the overlay. It seems that the way to fix it is to change the position to absolute rather than relative. However, I have a 3 grid design that needs to be resized as the window gets resized. So, I am wondering if there is anyway to delete the white spacing without setting everything to absolute position.

Thank you

My HTML CODE:

<body>
    <div id="content">
        <div class="grid3">
            <article class="bucket" >
                <a href="#">
                <div class="img-overlay"><h3>Monogram</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>Gastalt Composition</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>The Red Thread - A Visual Book</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>Typographic Hierarchy</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>Living in Two Spaces</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>  
        </div>
    </div>
</body>

My CSS CODE

@charset "UTF-8";

*{  
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
margin:0; }

html, body{
background: #fff;
height: 100%;
margin: 0;
padding: 0; }

#content{
    background: tan;
    float: left;
    padding: 0 3%;
    width: 100%; }

    a{ text-decoration: none; }

    .bucket{
        float: left;
        margin: 2% 3%;
        position: relative;
        width: 27.3%; }

        .grid3 .bucket:nth-of-type(3n+1){  clear: left; }

        .bucket img{ 
            height: auto;
            width: 100%; }

.img-overlay{
background-color: rgba(0,0,0,0.6);
bottom: 0px;
top: 0px;
opacity: 0;
overflow:hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s; }

.img-overlay h3{
    opacity: 1;
    display: inline-block;
    margin: auto;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    color: rgba(255,254,254,1.00);
    text-align: center;
    vertical-align: middle; }

.bucket:hover .img-overlay{ opacity: 1; }


/* Responsive */

@media screen and (max-width:740px){

.bucket{ 
    width: 44%; }

.grid3 .bucket:nth-of-type(3n+1){ clear: none; }
.grid3 .bucket:nth-of-type(2n+1){ clear: left; }

}

@NiettheDarkAbsol shouldn't this be a duplicate of http://stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag instead of the one you linked? :-) — TylerH, May 28 '14 at 17:07
@TylerH The one I linked was supposed to be a reference q/a but it got closed as a duplicate of one of the questions I was trying to make a reference answer of. — Niet the Dark Absol, May 28 '14 at 17:37

Extra white spacing under a div element

0 Answers0