CSS perfect square grid slightly imperfect; small margin forms from who knows where

Question

I'm trying to create a group of divs that are to be perfectly fluid squares, resizable with the viewport.

Here's the HTML structure:

<div id="container">
    <div id="row">
        <div class="cell A1">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">MIKEY
                <br/>
                <p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div>
        </div>
        <div class="cell A2">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">ERIC
                <br/>
                <p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div>
        </div>
        <div class="cell A3">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">MIKEY
                <br/>
                <p>EPHEMERA</p>DIGITAL COLLAGE</div>
        </div>
        <div class="cell A4">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">ERIC
                <br/>
                <p>REJJIE SNOW</p>SITE DESIGN</div>
        </div>
    </div>

The img class="spacer" image is a blank square png intended to 'stretch out' a div to prevent it from being 0x0.

Here's some CSS. I've included a little extra because I'm not sure exactly what's causing it.. I believe it's the :before elements.

.A1, .A2, .A3, .A4 {
    position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: -webkit-filter .2s ease-in-out;
    filter: url(filters.svg#grayscale);
    /* Firefox 3.5+ */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(90%) brightness(30%);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    z-index: -1;
}
.A1:before {
    background-image:url('spindrift.jpg');
    background-size:cover;
}
.A2:before {
    background-image:url('daynnite.jpg');
    background-size:cover;
}
.A3:before {
    background-image:url('');
    background-size:cover;
}
.A4:before {
    background-image:url('');
    background-size:cover;
}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before {
    -webkit-filter:none;
}
/* text hover */
 div.cell:hover #text {
    opacity:0;
}
#text {
    opacity:1;
    display:table;
    position:absolute;
    z-index:999;
    color:#ffffff;
    text-align:center;
    width:100%;
    top:44%;
    left:0;
    text-decoration:none;
}
p {
    font:16px ProximaNovaBold, sans serif;
    margin:0;
    padding:1 0 1 0;
}
/* table rules */
 #container {
    display:table-row;
    width:100%;
}
#row {
    display:table-row;
    width:100%;
}
.cell {
    position:relative;
    display:table-cell;
    width:700px;
    height:auto;
}
html {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color:black;
    color:black;
}
/* image SPACER rules */
 img {
    max-height:600px;
    max-width:100%;
    height:auto;
    width:100%;
    z-index:2;
}

I'm using some webkit filters over the background images of these divs, and I don't want these filters affecting the child text so I MUST use the :before indicator. Here's a fiddle http://jsfiddle.net/QC28s/2/

They are blank(with no background images) right now, it shouldn't matter. If you go into developer tools and look at the divs, the spacer is behaving correctly as it forces each square to 209x209. However if you look at the :before indicator directly before it on the HTML you can see that it(:before) is putting a small 6px margin on the bottom of the squares, making them 209x215. That's what my problem is... Much appreciated.

Answer 1

Explanation :

The :before element has position:absolute; so it can't expand it's parent. The problem doesn't come fro there.

The issue is the whitespace created by the images. Images are inline elements they add white-space just after them (like inline-block elements).

Solution :

Add display:block; to the image tag so they are not inline elements anymore and don't add white-space.

See this FIDDLE

Btw you might be intersted in this question