div 링크는 div의 절반 만 덮습니다.

Question

여기 코드를 기반으로 CSS 뒤집기 애니메이션 만들기를 만들려고합니다 : http://davidwalsh.name/css-flip하지만 플립 뒤쪽의 전체 div를 링크에서 만들고 싶었습니다. @thepeer 여기에서 답 : https://stackoverflow.com/a/3494108/1818828 */

나는 여기 jsfiddle에 함께 넣어 : http://jsfiddle.net/gmdavis62/PB7j8/14/은 (주에만 시험/웹킷을 위해 설계까지)

이

.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 헤드 라인의 기본 여백 - 위쪽이 있습니다. 0으로 설정하면 괜찮습니다. 피들 : http://jsfiddle.net/PB7j8/20/

h4 
{ 
    margin-top: 0; 
}