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