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">

Answer 2

我不知道为什么会这样。

就像一个方面的“回答”，但是，无论它的价值如何：如果你不需要div，如果你摆脱它并把它放到

这个问题就会消失

id="photo"

直接在图像上。

Answer 3

HTML

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

CSS

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

添加行高：0;强制图像在div容器内正确排列，排除图像底部的空白区域... ref：http://jsfiddle.net/ahs9dv0L/3/另请参阅：Image inside div has extra space below the image

Answer 4

现在，您定位的是整个div部分。要处理图像，请在css文件中使用以下代码：

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

img底部和父div之间的间隙未知

4 个答案: