相关疑难解决方法(0)

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

我本质上是在尝试创建一个"figure"元素的版本(即将出现在HTML5中),我在其下面有一个简短描述的图像.

但是,我想将整个元素的宽度限制为图像的宽度,因此文本不会比图像宽(如果需要,可以包装到多行).

基本HTML:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

我精通使用CSS,但我想不出任何纯CSS解决方案,而无需添加style="width:100px"到div相匹配的图像宽度.

更新:经过一番搜索和思考,最好的方法似乎是在div上使用内联宽度.我会在图像上保留width属性,以防我希望div比图像宽一点(例如为了容纳更长的标题).

这种方法也意味着我可以将两个图像并排放在下面的标题中.如果我有一组相同大小的图像,我当然可以为每个图像添加一个额外的样式div.

感谢所有回答的人!