画像とのテキストの配置に影響する行の高さ画像の余白が余分にある場合の余白余裕

Question

line-heightの2.0のテキストを視覚的に視覚的に整列しようとしています。

問題は、画像がアンカータグ内にあり、中央揃えで適用されたマイナスマージンが小さすぎて不要な場合です。 CSS標準ではhas()がサポートされていないため、アンカーに含まれる左右の画像のすぐ後に続く段落とヘッダーに負のマージンを与える最良の方法は何ですか？

JavaScriptを使用してDOM内のHTMLにクラスを追加して、aに「左揃えの画像が含まれています」と指定できました。しかし、適切な解決策がある場合は、CSSだけを使用したいと思います。

JSFiddle Example

HTML：

<div class="example1 clearfix"> 
<a><img class="left" src="//placehold.it/500x500/" width="100" /></a> 
<p> 
This is correct. example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 example1 
</p> 
</div> 

<div class="example2 clearfix"> 
<a><img class="center" src="//placehold.it/500x500/" width="100" /></a> 
<p> 
This is <em>not</em> correct. example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 example2 
</p> 
</div> 

<div class="example3 clearfix"> 
<img class="left" src="//placehold.it/500x500/" width="100" /> 
<p> 
This is correct. example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 example3 
</p> 
</div> 

<div class="example4 clearfix"> 
<img class="center" src="//placehold.it/500x500/" width="100" /> 
<p> 
This is correct. example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 example4 
</p> 
</div> 

CSS：あなたが好きな場合のためのマージンをリセットし、ルール追加することができます

.clearfix:before, 
    .clearfix:after { 
     content: " "; 
     display: table; 
    } 
    .clearfix:after { 
     clear: both; 
    } 

p {line-height:2.0;} 
img.left {float:left;} 

    img.left + p, 
    a + p { 
     margin-top:-.5em; 
    } 
    img.left + h2, 
    a + h2{ 
     margin-top:-.1em; 
    } 
    img.left + h3, 
    a + h3 { 
     margin-top:-.5em; 
    } 

Answer 1

：

a .center { 
    margin-bottom: 1em; 
} 

かを、 y OUは、リンクにクラスを移動し、次のようにルールを書き換えることができます：最後のオプションについては

.left { 
    float: left; 
} 

.left + p { 
    margin-top: -.5em; 
} 

.left + h2 { 
    margin-top: -.1em; 
} 

.left + h3 { 
    margin-top: -.5em; 
} 

：提案のためhttps://jsfiddle.net/ntwysnq2/4/