HTML5<；图>；边距/填充

如果HTML5元素

图
中有图像，它似乎会添加一些边距/填充。如果在图形周围添加边框，则可以在元素内部看到一个小填充

<figure>
    <img src="image" alt="" />
</figure>



我通过写
*{margin:0；padding:0}

有人知道怎么处理吗？请看一下这把小提琴：
它不是
错误-它是
元素的正常行为

要修复它，请尝试以下操作-

更新

默认情况下，任何以内联方式呈现的图像（如文本），因此下面的少量额外空间是所有文本行的空间（即对于
q
，
p
等）

上述答案结合了两种解决问题的方法。因此，基本上，您可以只使用其中一个：

img { display: block; }

或

它没有本地化到
图
：我很好奇，因为
垂直对齐：底部
或
middle
也会产生相同的结果（而且
显示：block；
似乎没有必要）：这种行为的原因是什么？为什么
垂直对齐：基线产生额外的空间？啊哈，我明白了，它与文本的实际字母完全一致：总体意见：所有上述工作，但我更喜欢垂直对齐：底部；-它似乎更好地描述了我想要实现的目标。。。我不喜欢显示块，因为我正在完全改变图像在流中的行为。。。
img { display: block; }

img { vertical-align: top; }