3

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

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

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

为什么会这样？

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

我想删除它。

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

所有这一切只有在我使用时才会发生<!DOCTYPE html>- HTML5 doctype

4

3 回答 3

7

您的第一个问题由空白回答。改变

<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>
于 2013-10-11T16:34:31.263 回答
5

图像像内联元素一样渲染，因此对空白很敏感，并且在底部留有一个间隙，为下行文本元素（例如 j、g、y）保留。删除图像之间的空白区域，方法是简单地将代码中的元素相互靠近，或者在它们之间放置 HTML 注释（例如<img><!-- --><img>）。要删除图像下方的间隙，请将vertical-align属性设置为顶部。默认为基线。

jsFiddle 示例（垂直对齐：顶部）

jsFiddle 示例（删除空格和垂直对齐：顶部）

于 2013-10-11T16:34:46.633 回答
1

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

尝试

img{float:left}

这将消除差距

于 2013-10-11T16:36:53.247 回答