Weird padding/margin/gap issue in column

[RideTheTides]

Hello,

Currently prototyping out a website with foundation 3. Can't seem to find where the this 2px gap is coming from.

The image of the girl is 422 px tall. The row/column is then is adding 2 px to make it 424 px tall for some reason.

I can't seem to find where these two pixels are coming from? Any help would be greatly appreciated as I've searched through and can't find a similar issue. Before I had the image at 420px tall and that made the column 422px tall, so 2px are being added.

Live site: www.ridethetides.com/contract/

[Motifsky]

perhaps because of this foundation row rule ?

.row::before, .row::after {
content: " ";
display: table;
}

[RideTheTides]

Thanks for the quick reply. I guess its hard to tell as I'm not really sure what that code means, but when I turn that CSS off in Safari inspector it breaks the entire website.

If that is the cause, I guess my next question would be: Is there a way to shift that image down 2px to compensate? Would really like there to be no gap

[Motifsky]

You have a class of ".bottom" applied to the image, simply modify that to--> margin-bottom: -2px;

On Aug 19, 2013, at 8:16 AM, RideTheTides notifications@github.com wrote:

Thanks for the quick reply. I guess its hard to tell as I'm not really sure what that code means, but when I turn that CSS off in Safari inspector it breaks the entire website.

If that is the cause, I guess my next question would be: Is there a way to shift that image down 2px to compensate? Would really like there to be no gap

—
Reply to this email directly or view it on GitHub.

[RobertinoValue]

Specify display: block; on the <img> tag.

[RideTheTides]

Thanks RobertinoValue, that fixed it. Really appreciate it!