html - div链接只覆盖了一半的div

Question

我正在尝试根据此处的代码创建一个 Create a CSS Flipping Animation:http://davidwalsh.name/css-flip但我还想将翻盖背面的整个 div 设为一个链接，这是我在@thepeer 的回答中找到的:https://stackoverflow.com/a/3494108/1818828 */

我将它们放在这个 jsfiddle 中:http://jsfiddle.net/gmdavis62/PB7j8/14/(注意到目前为止仅针对 webkit 进行了测试/设计)

.link{    /*Important:*/
    height:160px;
    width:160px;
    position:relative;
}
.back a span{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0px;
  z-index: 1;
}

我的问题是，另一方面(将鼠标悬停在图像上)链接只覆盖了 div 的右半部分。我试过调整宽度和左侧属性但没有效果。我还尝试将空跨度和链接移到其余内容之外，不做任何更改。

我的 div 有一个 CSS 红色轮廓，所以我可以看到它们的位置，除了 .link 被偏移之外，它没有解释链接被关闭的原因。这里发生了什么？

Answer 1

h4 标题有一个默认的 margin-top。将其设置为 0 就可以了。 fiddle :http://jsfiddle.net/PB7j8/20/

h4
{
    margin-top: 0;
}