css - CSS フラッシュ画像?

Question

私はこのサイトに取り組んでいます: http://seobeaver.ca/what-we-deliver/

ここで負の padding-bottom 値を使用して、以前に緑色のセクションに合わせて製品画像を取得しました。

img.img-with-animation {
opacity: 0;
position: relative;
padding-bottom: -7px;

突然それが機能しなくなり、画像と次のセクションの間にスペースができて効果が損なわれます。

ヘルプ？

Answer 1

負のパディング値は無効ですが、負のマージン値は有効です。したがって、 に変更padding-bottomしmargin-bottom、負の値を保持できます。

img.img-with-animation {
opacity: 0;
position: relative;
margin-bottom: -7px;
}

Answer 2

margin-top: -7px緑のdivに設定します。

Answer 3

問題の原因を取り除くことによって、これに対処することをお勧めします。したがって：

img.img-with-animation {
    vertical-align: bottom;
}

デフォルトでは、画像は に設定されており、画像vertical-align: baselineの下にギャップが残ります。(画像は、その横にある可能性のあるテキストのベースラインと整列し、その下にディセンダー用のスペースがあります)。を使用してこれを変更できますvertical-align: bottom;。