不要な下マージン

Question

私は、次のHTMLマークアップで、モバイルSafariで表示されるページがあります。このような

<blockquote> 
    <p><img src="..."/> A paragraph...</p> 

    <p>...</p> 

    ... 
</blockquote> 

とCSS：

blockquote { 
    border-left: 1px solid #888; 
} 

blockquote img { 
    float: left; 
    margin: 0 20px 20px 0; 
} 

を

例えば

| IMAGE A paragraph, blah blah blah... 
| IMAGE blah blah blah... 
| IMAGE 
|  More paragraph, blah blah blah... 
| blah blah blah, blah blah blah... 

、01を参照してください。段落テキストが十分に長い場合

が、これは、所望の効果をもたらします

イメージとテキストの間に必要な空白を入れるにはイメージの右と下の余白が必要です。

ただし、段落テキストが短いと、下端に不要な余白ができます。通常、これは問題にならないだろうが、左側の境界線は、このグリッチが痛い親指のように目立つ：たとえば

| IMAGE A paragraph, blah blah blah... 
| IMAGE blah blah blah... 
| IMAGE 
| 

、この問題を解決する方法についてhttp://jsfiddle.net/KDYCN/1/

任意のアイデアを参照してください、すべての引用符を十分に長くする以外にも:)理想的ではありませんが、JavaScriptソリュトンでも許容されます。ありがとう！

Answer 1

変更この：

blockquote img { 
    float: left; 
    margin: 0 20px 0 0; 
} 

EDIT：これまで

blockquote img { 
    float: left; 
    margin: 0 20px 20px 0; 
} 

私はこれを削除し、トリックを行うように見えた：

blockquote:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

理由この隠されたものが画像wの後にあったi clear：両方とも、ブロッククォートをテキストとイメージの両方を含むのに十分に高くしました。一時的に国境BLOCKQUOTEを与えることによって、アクションでそれを参照してください：それは見るために、通常は何もその色あってはならないのは簡単ですので

blockquote { 
    border: 1px solid #00ff00; 
} 

私はネオングリーンが好きなので、それは私が場所で私のデバッグコードを残したかどうかを確認することも簡単です。