Css 理解HTML5中的图像处理

我是HTML5新手，我试图理解HTML5中处理图像的概念 看到这个了吗

示例1：我没有在图像之间添加任何边距或填充，但默认情况下，浏览器会在图像之间添加5倍的空间/间隙

示例2：图像本身的宽度太高，因此它将一个图像对齐在另一个图像的下方，但在这里，浏览器没有添加任何空间

为什么会这样

这就是我想要实现的：
在这里，我通过给它

宽度：100%

但浏览器在图像底部向其容器添加了一个

5px

空格/间隙

我想把它去掉

我试着给它绝对定位，但它搞砸了

---

只有当我使用

-HTML5 doctype

时，所有这些才会发生。您的第一个问题由空格回答。 改变

一行

<img alt="Some thing about Coral JQM" src="test_files/red0.png"><img alt="Some thing about Coral JQM" src="test_files/red0.png"><img alt="Some thing about Coral JQM" src="test_files/red0.png">

对于第二个问题，请将“垂直对齐”样式设置为“顶部”

<div style="background: #ff0">
    <img style="width: 100%; vertical-align:top;" alt="Some thing about Coral JQM" src="test1_files/red.png">
</div>

---

图像像内联元素一样呈现，因此对空白敏感，并且在底部留有一个间隙，用于下行文本元素（例如j、g、y）。删除图像之间的空白，方法是简单地将代码中的元素推到彼此相邻的位置，或者在它们之间放置HTML注释（例如

）。要消除图像下方的间隙，请将

垂直对齐

属性设置为顶部。默认值为基线

（垂直对齐：顶部）

---

（删除空白并垂直对齐：顶部）

问题很好…我很感激

试一试

---

这将消除差距

Nice理论。我真的很感激这个，没问题。还有一两种处理间距的方法，但这些是最简单也是最常见的。但我没有得到最后一种方法的答案。为什么它只出现在HTML5中。

<div style="background: #ff0">
    <img style="width: 100%; vertical-align:top;" alt="Some thing about Coral JQM" src="test1_files/red.png">
</div>

img{float:left}