我是 HTML5 的新手,我想了解在 HTML5 中处理图像的概念 看这个http://mavintophospital.com/test/test.html
示例 1:我没有在图像之间添加任何边距或填充,但默认情况下浏览器会在图像之间添加 5px 的空间/间隙
示例2:图片本身的宽度太高,所以将一张放在另一张下面对齐,但这里浏览器没有添加任何空间。
为什么会这样?
这就是我想要实现的目标:http://mavintophospital.com/test/test1.html
在这里,我通过给它 width: 100%
使图像流畅。
但是一个5px
空间/间隙由浏览器在图像底部添加到其容器中。
我想删除它。
我试过给它绝对定位,但它搞砸了。
这一切只有在我使用 <!DOCTYPE html>
时才会发生- HTML5 文档类型
最佳答案
您的第一个问题由空格回答。 改变
<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>
关于css - 理解 HTML5 中的图像处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19322899/