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.

Can you elaborate on what you mean by this? ". 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." — Emmanuel John, Jan 08 '15 at 06:19
Say an image is 100px tall, the container div is by default 103px. — user1576628, Jan 08 '15 at 06:22

score 25 · Accepted Answer · answered Jan 08 '15 at 06:20

25

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

Use -

img, iframe {
    display: block;
}

answered Jan 08 '15 at 06:20

Sujit Agarwal

12,348
11
48
79

Was it that easy? I'm wondering why inline display does that now. – user1576628 Jan 08 '15 at 06:26
2

by default an image and iframe gets displayed as INLINE and adds some gap towards bottom. To avoid this, we display as block :) simple – Sujit Agarwal Jan 08 '15 at 06:28
1

@user1576628 all inline element including inline-block element has line-height, because they're treated like a text. Unless you have a block element, or force it to display as block the line-height well be ignored. – Ariona Rian Jan 08 '15 at 06:45
3

@user1576628 inline elements have space below them to leave space for [descenders](https://en.wikipedia.org/wiki/Descender). – WD40 Mar 24 '17 at 16:51

score 3 · Answer 2 · answered Jan 08 '15 at 06:32

3

Images are not on the same baseline as text.

add

vertical-align:bottom;

to your img css

fiddle

answered Jan 08 '15 at 06:32

huan feng

7,307
2
32
56

score 2 · Answer 3 · answered Jan 08 '15 at 06:23

2

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

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

answered Jan 08 '15 at 06:23

Ayu Natsume

21
1

score 0 · Answer 4 · answered Jan 08 '15 at 06:24

For "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." <== Yes,

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

css :

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

*/

score 0 · Answer 5 · edited Mar 24 '17 at 17:58

0

Try this code. Fiddle

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

edited Mar 24 '17 at 17:58

WD40

429
1
7
19

answered Jan 08 '15 at 06:24

Arun Chandran Chackachattil

3,356
7
31
45

1

Hey there's a typo. Its `display` and not `dispaly`. – The Pragmatick Jan 08 '15 at 06:29

HTML-CSS div is 3px taller than child

5 Answers5