奇妙な動作 - img表示：ブロック対img表示：インラインブロック

Question

img display:blockを使用するのは、画像の下に余分な空白のピクセルが表示されないためです。しかし、私はこれが奇妙な結果を生むことがあることに気づいた画像よりも大きいDIVにあるリンクに添付された画像にdisplay:blockを使用すると、DIV全体がリンクになります。ここで

は私jsfiddle例です。https://jsfiddle.net/j42Ln4g8/1/

私が間違ってdisplay:blockを使用するか、これを修正するためのエレガントな方法はありますかな？私は内部のラッパーDIVを使用することができますが、これは画像と同じ寸法ですが、よりスマートな方法があると思いました。

HTML

<div class="image_holder"> 
    <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a> 
</div> 

<div class="image_holder2"> 
    <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a> 
</div> 

CSS

.image_holder { 
    margin:20px 0px; 
    background-color: aquamarine; 
} 

.image_holder img { 
    display: block; 
} 

.image_holder2 { 
    margin:20px 0px; 
    background-color: aquamarine; 
} 

.image_holder2 img { 
    display: inline-block; 
} 

Answer 1

ブロック要素は、改行を強制し、その親要素の幅いっぱいになります。他の要素が左右に来ることは許されません。

あなたのタグにはdisplay:inline-block;、imgにはdisplay:block;を使用してください。したがって、page not rendering with extra blank pixels under images.の問題はなく、あなたの部門全体がリンクになることはありません。

編集：vertical-align:bottom;をaタグに追加します。示唆されるように挙動が期待されるようにOriol

.image_holder { 
 
    margin:20px 0px; 
 
    background-color: aquamarine; 
 
} 
 
.image_holder a{ 
 
    display:inline-block; 
 
    vertical-align:bottom; 
 
} 
 
.image_holder img{ 
 
    display:block; 
 
} 
 

 
.image_holder2 { 
 
    margin:20px 0px; 
 
    background-color: aquamarine; 
 
} 
 

 
.image_holder2 img { 
 
    display: inline-block; 
 
}

<div class="image_holder"> 
 
    <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a> 
 
</div> 
 

 

 
<div class="image_holder2"> 
 
    <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a> 
 
</div>

Answer 2

ブロックレベル要素は、デフォルトでその容器の100％の幅を占有します。イメージの後ろに現れるスペースを取り除く方法は、ホワイトスペースがインライン要素の周りに保存されているので、そのスペースを作成するイメージの周りのスペースであるため、親にfont-size: 0;を設定することです。

また、要素を浮動させ、親をクリアすることもできます。

ここに両方の​​テクニックの例があります。

.image_holder { 
 
    margin:20px 0px; 
 
    background-color: aquamarine; 
 
    overflow: auto; 
 
} 
 

 
.image_holder img { 
 
    float: left 
 
} 
 

 
.image_holder2 { 
 
    margin:20px 0px; 
 
    background-color: aquamarine; 
 
    font-size: 0; 
 
} 
 

 
.image_holder2 img { 
 
    display: inline-block; 
 
}

<div class="image_holder"> 
 
    <a href=""><img src="http://imgur.com/a/hf7jx" width="180" height="200"></a> 
 
</div> 
 

 
<div class="image_holder2"> 
 
    <a href=""><img src="http://imgur.com/a/hf7jx" width="180" height="200"></a> 
 
</div>