ｈｔｍｌでaタグの範囲について

Question

htmで模写コーディングをしています。
aタグとimgタグとh1タグの範囲をきれいに重ねる事が出来ずに困っています。

<h1><a><img></a></h1>

上記の時aタとimgの範囲をぴっちり合わせたいのですがどのようにすればいいのでしょうか。
リセットcssを適用し、
aタグにdiplay:blockを使ってます。

Comments

[K_3578]

逸る気持ちは分かりますが、とりあえず回答者にわかるように質問を編集してください。
まず、MarkDownの<code>機能で現在書いているコードを編集して記載してください。

それと内容は校正しましょう。
htm→html
aタ→aタグ
diplay:block→display:block

[meg_]

aタグとimgタグの各属性はどうなっているのでしょうか？

Answer 1

aタグにdiplay:blockを使ってます。

block 要素だとリンクが横幅いっぱいに広がってしまいます。
inline または inline-block に変えてください。

img 要素に margin: 0; と vertical-align: bottom; を適用するとより確実かと思います。

<h1>
  <a href="..." class="image-link"><img src="..." alt="代替テキスト"></a>
</h1>

a.image-link {
  display: inline-block;
}

a.image-link img {
  margin: 0;
  vertical-align: bottom;
}