为什么在我的图像中容器内部有一个空白

Question

我遇到了一个问题，我在图像中遇到了空白，这个问题在firefox中没有发生。

这是问题图片。

这是代码。

HTML:

<hr>
<h2>Modos de Mezcla</h2>
<h3>Sobre imágenes (img)</h3>
<article class="card">
<img src="./assets/tree.jpg" alt="Arbol en una puesta de sol">
</article>

CSS：

html {
box-sizing: border-box;
font-size: 16px;
font-family: sans-serif;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
body {
margin: 0;
}
h1,
h2,
h3,
hr {
margin: 0;
}
.card {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
margin-bottom: 3rem;
border: thick solid #000;
}
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}

请帮帮我，谢谢大家。

Answer 1

这是因为全局"在&在框大小调整之后：inherit"；，

只要将其更改为内容框或初始，它就会解决您的问题，

我试过你的代码，它被修复了。

*,
*::after,
*::before {
box-sizing: content-box ;
}