Div元素自动大于指定值？

Question

无论我多努力使div 40px高，height div { /* To prove the div does get larger */ display: table; background-color: red; /* Not even explicitly setting height to 40px helps: */ height: 40px; max-height: 40px; /* Ofc, problem occurs also without these two lines. */ }都会越来越大。

以下是HTML示例：

＆＃13;

＆＃13;

<div>
  <img src="http://placehold.it/350x40">
</div>
<img src="http://placehold.it/350x40">

＆＃13;

div

＆＃13;

＆＃13;

＆＃13;

JsFiddle

我希望明确的意图是：40px应该只与其中的图像一样大。

由于里面的图片高div，我也希望40px也高background-color。

然而，它并非如此。它不断变大。我已将div设置为红色以突出显示问题：

是的，以上就是Firefox向我展示的内容。我也尝试过IE 11，结果相同。

我试过看看Firefox检查员。似乎由于某种原因，Firefox将44.5px的高度设置为var api = new ParseServer({ databaseURI: process.env.DATABASE_URI || 'mongodb://localhost:27017/dev', cloud: process.env.CLOUD_CODE_MAIN || __dirname + '/cloud/main.js', appId: 'xx', masterKey: 'xx', fileKey: 'xx', clientKey: 'xx', serverURL: 'xx', push: { ios: [ { pdx: 'certs/ParsePushDevelopmentCertificate.p12', // Dev PFX or P12 bundleId: 'bundleId', production: false // Dev } ] } }); 。

为什么会这样？如何阻止这种行为？

Answer 1

因为img是内联元素因此创建空间，您必须将img设置为显示为块级别，并且div

div {
  display: table;
  background: red
}
img {
  display: block 
}

<div>
  <img src="http://placehold.it/350x40">
</div>
<img src="http://placehold.it/350x40">

来自评论的

更新，

  

问题是我需要在这个div中有两个图像，一个在旁边   彼此。

改为使用inline-block。

div {
  display: table;
  background: red;
  font-size: 0 /* updated from comments */
}
img {
  display: inline-block /* updated from comments */
}

<div>
  <img src="http://placehold.it/175x40">
  <img src="http://placehold.it/175x40">
</div>
<img src="http://placehold.it/350x40">