HTML-CSS div is 3px taller than child

Question

I'm working on a project that uses several divs of the same class, each containing a single child element that might be an image or an iframe, of unspecified height. I'd like the container div to be exactly the height of its child element, but the default height is 3px taller than the child.

I've got a JSfiddle demonstrating the problem at http://jsfiddle.net/52me041n/2/.

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;
}

I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS.

Answer 1

Updated the fiddle. http://jsfiddle.net/52me041n/3/

Use -

img, iframe {
    display: block;
}

Answer 2

Images are not on the same baseline as text.

add

vertical-align:bottom;

to your img css

fiddle