画像にborderで枠線を付けたが、謎の空白ができてしまう

Question

前提・実現したいこと

phpで画像を動かせるプログラムを作成中に、画像に枠線を付けようとしたところ、画像と枠線の間に謎の空白ができてしまいました。
どこが悪いのか、もしくはここに書いてあるソースの中には無さそうだったら他に悪そうな原因を教えてください。
最終手段ですが、枠を無理やり縮める方法でも構いません。
よろしくお願いします

発生している問題・エラーメッセージ

該当のソースコード

<div class="drag-and-drop" id="target"/>
  <div class="wakusen">
    <img src="zigzagma.jpg" width="20px">
  </div>
</div>

.drag-and-drop {
cursor: move;
position:absolute;
z-index:10;
color:#fff;
}

.wakusen{
  border: 3px solid black;
  border-radius: 3px;
  box-sizing: border-box;
}

document.getElementById("target").addEventListener('click', function(event) {
   var pagex = event.pageX ; // 水平の位置座標
   var pagey = event.pageY ; // 垂直の位置座標
   document.getElementsByName('zahyou')[0].value = pagex + ":" + pagey;
});

Comments

[m.ts10806]

「PHPで画像を動かせるプログラム」はどこにあたるのでしょうか

[kei344]

実際に出力されたHTMLと、実際に使用しているCSSを提示されたほうが解決しやすいと思います。

Answer 1

img {
  display: block
}

Comments

[kyoya0819]

サンプル

https://codepen.io/asuchi0819/pen/OJPoXWO?editors=1100

[Takedai]

解決しました、ありがとうございます！

[kyoya0819]

解決したようで何よりです。

Answer 2

最低でもimgにwidth="20px"はおかしいですね、pxはいりません
まずはwidthとheightとaltを設定してください

Answer 3

タグimgに枠線をつけるのは仕様に合いませんか？

img {
  border: 3px solid black;
  border-radius: 3px;
}