javascript - HTML-CSS div 比子元素高 3px

Question

我正在开发一个使用同一类的多个 div 的元素，每个 div 都包含一个未指定高度的子元素，该子元素可能是图像或 iframe。我希望容器 div 恰好是其子元素的高度，但默认高度比子元素高 3px。

我在 http://jsfiddle.net/52me041n/2/ 有一个 JSfiddle 演示这个问题.

HTML:

<div class="outside">
    <img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/>
</div>
<br/>
<div class="outside">
    <iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.outside{
background-color: red;
}

我想知道是否可以仅使用 CSS 将 div 设置为正确的高度，如果不能，如何使用 JS 调整它。

Answer 1

更新了 fiddle 。 http://jsfiddle.net/52me041n/3/

使用 -

img, iframe {
    display: block;
}