理解HTML5中的图像处理
我是HTML5的新手，我试图理解在HTML5中处理图像的概念--参见这个http://mavintophospital.com/test/test.html
示例1:我没有在图像之间添加任何空白或空白，但默认情况下，浏览器会在图像之间添加5 5px的空间/空白。
示例2:图像本身的宽度太高，因此它对齐另一个下面的一个，但是这里浏览器没有添加任何空间。
为什么会发生这种情况？
这就是我想要实现的：http://mavintophospital.com/test/test1.html
在这里，我通过给它width: 100%来创建图像流体，但是在图像底部的浏览器将一个5px空间/间隙添加到它的容器中。
我想移除它。
我试过给它绝对的定位，但它搞砸了。
所有这些只有在我使用<!DOCTYPE html> - HTML5 doctype时才会发生。
回答 3
Stack Overflow用户
发布于 2013-10-11 16:34:46
图像呈现为内联元素，因此对空白很敏感，并且在底部保留了一个空白，以供下行文本元素(例如j、g、y)使用。删除图像之间的空白，方法是简单地将代码中的元素相互推送，或者在它们之间放置HTML注释(例如，<img><!-- --><img>)。若要删除图像下面的空白，请将vertical-align属性设置为顶部。缺省值是基线。
jsFiddle example (垂直对齐:顶部)
jsFiddle example (删除空白和垂直对齐:顶部)
Stack Overflow用户
发布于 2013-10-11 16:34:31
你的第一个问题是用空格回答的。变化
<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>Stack Overflow用户
发布于 2013-10-11 16:36:53
问题很好.我很感激。
试一试
img{float:left}这将消除差距。
https://stackoverflow.com/questions/19322899
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号