为什么div环绕img标签总是比img大？

问题描述

在下面的代码中，只是一个用div标签包裹的img标签。没有其他的！图像应扩展到父级的100％宽度。没有提供其他规则。

.page {
  max-width: 300px;
}

.wrapper {
  border: 2px dotted green;
}

img {
  width: 100%;
}

<div class="page">

  <div class="wrapper">
    <img src="https://images.unsplash.com/photo-1604869176104-fcd142638bd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="random image">
  </div>


</div>

在所有浏览器中，结果是带有div标签arround的img。但是看起来img的底边是margin，div的底边是div。 因此，让我们将margin: 0; padding: 0;添加到所有元素：

.page {
  max-width: 300px;
}

.wrapper {
  border: 2px dotted green;
}

img {
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

<div class="page">

  <div class="wrapper">
    <img src="https://images.unsplash.com/photo-1604869176104-fcd142638bd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="random image">
  </div>


</div>

结果仍然相同... 使两个元素具有相同的宽度和高度（就像每个嵌套块元素都应该一样）的唯一解决方案是在包装div中添加display: flex;。 WTF？

有人可以解释为什么他们指定了这种不合逻辑的默认行为吗？

解决方法

这是因为图像标签默认情况下是内联呈现的，因此请用display:block;

进行更改

.page {
  max-width: 300px;
}

.wrapper {
  border: 2px dotted green;
}

img {
  width: 100%;
  display:block;
}

<div class="page">
  <div class="wrapper">
    <img src="https://images.unsplash.com/photo-1604869176104-fcd142638bd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="random image">
  </div>
</div>