ブラウザでの "quirk"レンダリングの理解

Question

この​​をご覧ください。

クイックインフォ：それはCSSで中央に配置され内部で

• div要素が
500pxなど広い画像です（マージン：0自動）
• 画像は（その周りにアンカータグラッパーを持っています何CSS）

問題ありません：
あなたはinspe場合アンカータグ（firebugやその他のインスペクタ）を使用すると、イメージと同じ幅と高さが表示されますが、これは私にとって正しいですが、完全なdivはクリック可能です。

質問：

• は、アンカータグの間違ったサイズを示す放火犯か？
• ブラウザが間違っていますか？ （私はそうではないと思う）
• 何が起こっているのですか？ :)

Answer 1

<img>はdisplay:blockと書かれていると思われます。つまり、<img> 要素（！）（グラフィックイメージ自体とは対照的に）は、どのような幅に割り当てられていても埋め込むように拡張されます。 display:blockの設定を削除すると、クリック可能な領域が予想どおりに画像の領域に戻されることに注意してください。

質問は次のようになります。クリック可能な領域を画像に限定しながら、どのようにリンクされた画像を中央に配置しますか？一つの方法は次のとおりです。

div { width: 500px; text-align:center; } 

Answer 2

画像の周囲にアンカータグがあります。画像に余白があります。 autoはここでは0ではありません。これは500と画像の幅/ 2の差です。

余白を含めたくない場合は、画像とアンカーをdivにラップし、 0自動;