Javascript HTML-CSS div比child高3倍

我正在做一个项目，它使用同一类的几个div，每个div都包含一个子元素，可能是一个未指定高度的image或iframe。我希望container div正好是其子元素的高度，但默认高度是子元素的3倍

我有一个JSFIDLE正在演示这个问题

HTML:

我想知道是否可以只使用CSS将div设置为适当的高度，如果不可以，如何使用JS将其设置为正确的高度。

更新了fiddle

使用-

img, iframe {
    display: block;
}

---

您需要为父div中的子级将display属性设置为block。作为实践，我也总是将边距和焊盘设置为0。拨弄

对于“我想知道是否可以仅使用CSS将div设置为正确的高度，如果不可以，如何使用JS将其设置为正确的高度。”请尝试以下代码

---

图像与文本不在同一基线上

加

到你的img css

---

你能详细解释一下这是什么意思吗？“。我希望容器div正好是其子元素的高度，但默认高度比子元素高3倍。”假设图像的高度为100px，容器div默认为103px。有那么简单吗？我想知道为什么内联显示现在会这样做。默认情况下，图像和iframe显示为内联，并向底部添加一些间隙。为了避免这种情况，我们显示为block:）simple@user1576628包括内联块元素在内的所有内联元素都有行高，因为它们被视为文本。除非您有块元素，或强制它显示为块，否则行距将被忽略。@user1576628内联元素在其下方有空间为其留出空间。嘿，有一个打字错误。其

显示

而非

显示

。

.outside{
background-color: red;
}

img, iframe {
    display: block;
}

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

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

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

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

vertical-align:bottom;