html - 图像和容器 div 以不正确的宽度呈现

Question

我在 div 中嵌入了一个图像，如下所示，但是，div 以不正确的宽度呈现（在 MacOS 上的 Safari 中进行测试）。d当我使用margin-leftof删除 div 时，问题似乎自行解决了20px。

.a {
width: 75px;
height: 75px;
}

.b {
width: 100%;
height: 100%;
border-radius: 10px;
}

.c{ 
display: flex;
flex-direction: row;
width: -webkit-fill-available;
}

.d { 
display: flex;
flex-direction: column;
width: -webkit-fill-available;
margin-left: 20px;
}

.e { 
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
}

<div class="e">
<div class="c">
<div class="a"><img src="https://minimalistbaker.com/wp-content/uploads/2019/07/EASY-1-Pot-Massaman-Curry-Basic-ingredients-BIG-flavor-lots-of-protein-options-for-vegan-vegetarian-and-meat-eaters-plantbased-glutenfree-curry-massaman-recipe-minimalistbaker-34.jpg" class="b"><div class="d"></div></div></div></div>

标签： htmlcssimage