html - img 底部和父 div 边框之间的未知间隙

Question

我有下面的 CSS 和 HTML。我尝试更改图像的大小，但它不起作用。为什么我的图像下方有一个空隙？

#photo {
  position: absolute;
  margin-left: 15px;
  margin-top: 15px;
  border: 3px solid black;
}

<div id="photo">
  <img src="http://www.placehold.it/210X180" alt="Picture" style="width:210px;height:180px" />
</div>

Answer 1

尝试移除 css 边框

border: 3px solid black;

并在图片标签内添加边框

<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" border="3">

或者删除 id="photo"来自 <div>并在里面添加 <img tag>

<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" id="photo">