爲什麼我的標題和圖像之間存在大約1-2像素的空白？

我似乎無法找到任何保證金，所以我很困惑，原因是什麼以及如何刪除它。你無法看到圖像，但你可以看到灰色的邊框與標題和圖像之間的差距仍然https://jsfiddle.net/nyftp2b7/11/爲什麼我的標題和圖像之間存在大約1-2像素的空白？

.caption-clr { 
 
    background-color: rgba(0, 0, 0, .1); 
 
} 
 
body { 
 
    background-color: lightgreen; 
 
}

<figure class="main-image"> 
 
    <a href="img/cannabislegalmap.png"> 
 
    <img src="img/cannabislegalmap.png" width="100%" alt="Image of a map of states were recreational cannabis is legal"> 
 
    </a> 
 
    <figcaption class="caption-clr">States were recreational cannabis use is legal. 
 
    </figcaption> 
 
</figure>

來源

2016-11-10 Brandon

它可能是您的瀏覽器可能會圍繞一個標籤來增加保證金/填充？ – raphael75

所有的HTML元素都帶有默認樣式。您需要了解如何在瀏覽器的devtools中使用「檢查器」。在許多瀏覽器中，您可以右鍵單擊某個元素並選擇「檢查」以查看應用了哪些CSS。 –

我已經使用檢查員多數民衆贊成爲什麼我很困惑，我沒有看到圖像上的任何保證金或任何會影響它的父母元素 – Brandon

如果你把float: left;

的圖像上，這像這樣解決了這個問題;

.main-image img { 
float: left; 
}

感謝

來源

2016-11-11 11:08:22 Jay

謝謝你知道它嗎？你知道技術原因嗎？ – Brandon

對不起，延遲迴復Brandon，因爲我回答了您的問題，我還沒有上線。瀏覽器自動爲圖像添加間距（邊距和/或填充），除此之外，與主體相同。浮動圖像將覆蓋這些樣式。您也可以通過使用顯示區塊來解決此問題，但這可能無法正常工作，具體取決於您如何設計網站的其他部分。我希望這解釋得很好。 – Jay

爲什麼我的標題和圖像之間存在大約1-2像素的空白？

回答

相關問題