Question

我是HTML5的新手，我试图理解在HTML5中处理图像的这个概念请参阅此http://mavintophospital.com/test/test.html

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

示例2：图像本身的宽度太高，因此它将一个在另一个下方对齐，但此处浏览器不会添加任何空格。

为什么会这样？

这就是我想要实现的目标：http://mavintophospital.com/test/test1.html
在这里，我通过给它width: 100%使图像流畅但是，图像底部的浏览器会将5px空格/间隙添加到其容器中。

我想删除它。

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

只有在我使用<!DOCTYPE html> - HTML5 doctype

时才会发生这一切

Answer 1

您的第一个问题由空白区域回答。变化

<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">

到一行

<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>

Answer 2

图像呈现为内嵌元素，因此对白色空间敏感，并且在底部留有间隙，为下降文本元素（例如j，g，y）保留。只需在代码中按下彼此相邻的元素，或在它们之间放置HTML注释（例如<img><img>），即可删除图像之间的空白区域。要删除图像下方的间隙，请将vertical-align属性设置为顶部。默认为基线。

jsFiddle example （vertical-align：top）

jsFiddle example （删除了空格并且垂直对齐：顶部）

Answer 3

问题很好......我很感激。

尝试

img{float:left}

这将消除差距

了解HTML5中的图像处理

3 个答案: