CSS應用代碼中沒有的保證金

Question

對Web開發人員來說還很新。 我有一個頁面，頁面具有基本的文檔流，圖像后跟文本。

 html, body { height: 100%; margin: 0; padding: 0; } body { background: url(Images_Albums/Background.jpg) no-repeat; background-size: 100%; } article { margin: 0; padding: 0; position: absolute; width: 32%; height: 100%; left: 50%; transform: translate(-50%, 0); background: url(Images_Albums/FrontImage.jpg) no-repeat; background-size: 100%; } #container { margin: 0; padding: 0; margin-top: 9%; position: relative; width: 43%; left: 50%; transform: translate(-50%, 0); } img { max-width: 100%; } p { margin: 0; padding: 0; color: white; font-family: QuaestorSans; text-align: center; } 

 <article> <div id="container"> <div id="album1" class="albums"> <img src="Images_Albums/Album1.jpg"> <p>[details]</p> </div> <div id="album2" class="albums"> <img src="Images_Albums/Album2.jpg"> <p>[details]</p> </div> <div id="album3" class="albums"> <img src="Images_Albums/Album3.jpg"> <p>[details]</p> </div> </div> </article> 

我的問題是圖像和文本之間有空間：

我有選擇文本元素的Web檢查器，您可以看到此元素與上面的圖像之間存在間隙。 我所有的邊距和填充都是0，那么為什么會出現這個間隙？ 非常感謝！

Answer 1

該空間是圖像的內聯元素，是由圖像引起的。 要刪除空間，只需添加display: block到img

CSS

img {
  max-width: 100%;
  display: block;
}

Answer 2

嘗試為您的img標簽添加0的邊距。 許多HTML標記具有附加的默認CSS，除非您專門對其進行覆蓋，否則它們將被應用。

img {
  max-width: 100%;
  margin: 0;
}

Answer 3

您可以將display: block和float: left img使用。