フロートでアンカーサイズが増加する

Question

画像サイズは42 * 42に固定されています。しかし、inspect要素のアンカータグにカーソルを合わせると、サイズは42 * 46として表示されます。アンカータグのサイズが大きくなるのはなぜですか？私はフロートを使用しているからですか？

<a href="https://www.w3schools.com" 
 
style="float:left"><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></a>

Answer 1

それは理由imgのdisplayとvertical-alignのです。以下の作品にvertical-alignの設定：

<a href="https://www.w3schools.com" style="float:left"> 
 
    <img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align: middle;" /> 
 
</a>