消除圖像標籤之間的橫向差距HTML/CSS

我只是在練習HTML和CSS，而我遇到了一個惱人的問題。我想知道這個橫向差距是什麼，以及如何去除它？消除圖像標籤之間的橫向差距HTML/CSS

在此先感謝

enter image description here

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Practice</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> 
     <meta content="utf-8" http-equiv="encoding" /> 
     <style> 
     html,body 
     { 
     margin:0; padding:0; height:100%; 
     } 
     </style> 
    </head> 
    <body> 
     <script src="./js/jQuery.js"></script> 

     <img id="sample-img" src="Green-Nature-wallpaper.jpg" style="margin:0; padding:0;"></img> 
     <img id="sample-img2" src="Green-Nature-wallpaper.jpg" style="margin:0; padding:0;"></img> 
     <script> 
     $(document).ready(function() { 
      $("#sample-img").width($(window).width()); 
      $("#sample-img").height(0.6*$(window).height()); 
      $("#sample-img2").width($(window).width()); 
      $("#sample-img2").height(0.6*$(window).height()); 
     }); 
     $(window).resize(function() { 
      $("#sample-img").width($(window).width()); 
      $("#sample-img").height(0.6*$(window).height()); 
      $("#sample-img2").width($(window).width()); 
      $("#sample-img2").height(0.6*$(window).height()); 
     }); 
     </script> 
    </body> 
</html>

來源

2014-12-06 Apha

當您在瀏覽器中進行調試時，您會看到什麼？ – ElGavilan 2014-12-06 01:05:57

@ElGavilan Nothing，Empty .. – Apha 2014-12-06 01:07:15

它的圖像之間的空白。使他們顯示塊。 – 2014-12-06 01:08:09

你試過設置圖像margin和padding爲0？

<style> 
    img { 
     position:relative; 
     display:block; 
     margin:0; 
     padding:0; 
    } 
</style>

來源

2014-12-06 01:08:20

它工作了謝謝。 – Apha 2014-12-06 01:10:17

這可行，但不一定是答案。它將圖像的默認內聯樣式更改爲阻止。這可以是好的，但可能會根據上下文導致不良影響。 – Rob 2014-12-06 01:23:01

這取決於頁面是否使用其他圖像。如果是這樣，他可以簡單地爲他想要顯示爲塊的圖像分配一個類，並將其他圖像保留爲其默認CSS。 – 2014-12-06 01:26:02

圖像是內嵌內容，就像單詞或單個字符一樣。圖像與放置字符的基線對齊。將vertical-align:bottom添加到圖像CSS。圖像是內聯元素，放置方式與文本類似，您所看到的是爲字母「g」的下捲曲等文本字體的下行保留的間隙。

來源

2014-12-06 01:10:29 Rob

消除圖像標籤之間的橫向差距HTML/CSS

回答

相關問題