HTML-CSS markup 3px higher than child's

Question

I am working on a project that uses several divs of the same class, each of which contains one child, which can be an image or iframe, of undefined height. I would like the div container to be exactly the height of its child, but the default height is 3px higher than the child.

I have 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 would like to know if it is possible to set the div to the desired height using only CSS, and if not, how to use it correctly with JS.

Answer 1

Updated script. http://jsfiddle.net/52me041n/3/

Use -

 img, iframe { display: block; } 

Answer 2

You need to set the display property to lock for children in the parent div. As a practice, I always also set margins and pads to 0. fiddle here

 .outside > * { margin: 0; padding: 0; display: block; } 

Answer 3

Images are not on the same baseline as the text.

add

 vertical-align:bottom; 

to your img css

fiddle

Answer 4

For "I would like to know whether it is possible to set the div to the desired height using only CSS, and if not, how to use it with JS correctly." <== Yes,

 <div id="cntr"> </div> 

css:

 #cntr { width : 100px; height : 100px; overflow : hidden; } /* overflow may have other values also like hidden, auto, scroll 

* /

Answer 5

Try this code. Fiddle

 .outside { background-color: red; display: block; } .outside img, iframe { float: left; }