CSSのフリッピングアニメーションの下にギャップがある

Question

画像の後に説明を追加しようとしていますが、その画像の後ろに別の画像が表示されますが、画像の下には常にギャップがあります。私はギャップをなくすために説明にmargin-top:-200pxを追加できると考えていましたが、それを引き起こす原因を正確に知りたいのですが、これを解決する別の方法があるかどうかを知りたいと思います。

https://jsfiddle.net/vLnpkkos/

この質問は途方もなく愚かかもしれない理由は、したがって、すべての私にとって非常に新しいです。あなたの時間をありがとう！

Answer 1

次のCSSセレクタの高さが原因です。

.flip-container, 
.front, 
.back { 
    width: 320px; 
    height: 480px; 
}