理解圖像處理在HTML5

我是新來的HTML5，我想看到這個http://mavintophospital.com/test/test.html 理解圖像處理在HTML5

例1，瞭解在HTML5 處理圖像這個概念：我還沒有添加任何保證金或填充的圖像之間，但默認情況下，瀏覽器會在圖像之間添加5px的空間/間距

示例2：圖像本身的寬度太高，因此它會在另一個之下對齊，但這裏瀏覽器不會添加任何空間。

這是怎麼發生的？

這是我想才達到：http://mavintophospital.com/test/test1.html
在這裏，我給它width: 100% 但5px空間/間隙通過瀏覽器在圖像到其容器底部添加進行的畫面流體。

我想將其刪除。

我曾嘗試給它絕對定位，但它搞砸了。

這一切，當我用<!DOCTYPE html>只發生 - HTML5的doctype

來源

2013-10-11 user2569737

圖像呈現像內聯元素，因此是對白色空間敏感並具有爲在文本伸元件保留（例如Ĵ，G，Y）的底部的間隙。刪除圖片之間的空白區域，只需在代碼中將相鄰元素按住，或者在它們之間放置HTML註釋（例如<img><img>）即可。要刪除圖像下方的間隙，請將vertical-align屬性設置爲最高。默認值是基線。

jsFiddle example（垂直對齊：頂部）

jsFiddle example（空格刪除和垂直對齊：頂部）

來源

2013-10-11 16:34:46 j08691

好理論。我真的很欣賞這一個。 – user2569737

沒問題。有一種或兩種其他方式來處理間距，但這些是最簡單和最常見的。 – j08691

你的第一個問題是空白回答。變化

<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-11 16:34:31 Ceres

很酷..解決了我10分鐘problm在1分鐘， – user2569737

但我沒有得到答案的最後一個。爲什麼只發生在HTML5中。 – user2569737

的問題是好...我很欣賞。

嘗試

img{float:left}

這將刪除差距

來源

2013-10-11 16:36:53

理解圖像處理在HTML5

回答

相關問題