爲什麼CSS填充不顯示？

以下是index.html的爲什麼CSS填充不顯示？

figure, 
 
figcaption { 
 
    display: block; 
 
} 
 
figcaption { 
 
    color: black; 
 
} 
 
#profile_photo { 
 
    padding: 10px 20px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
#profile_photo figure { 
 
    padding: 6px 8px 10px 8px; 
 
    float: left; 
 
    position: relative; 
 
    width: 200px; 
 
}

<div id="profile_photo"> 
 
    <figure> 
 
    <img src="http://www.placehold.it/200X350" alt="Profile Photo" height="350px" /> 
 
    <figcaption>Welcome</figcaption> 
 
    </figure> 
 
</div>

未顯示用於圖像的填充用代碼。我究竟做錯了什麼？

如果有幫助，我試圖完成第2步of the following tutorial

來源

2015-07-20 Lam2345

這是顯示。爲塊設置一些背景顏色。 – Justinas

正在顯示。在圖形元素上設置背景顏色，您可以在圖像邊緣看到它。 – Quentin

您使用哪個瀏覽器？似乎在Firefox中工作... – SophieXLove64

它被顯示爲其他人評論，你只是沒有背景顏色才能看到它。如果你使用檢測工具，你會看到填充。

#profile_photo figure{ 
    padding: 6px 8px 10px 8px; 
    float: left; 
    position: relative; 
    width: 200px; 
    background: red; 
}

Working example

來源

2015-07-20 09:41:20 Doidgey

-2

嘗試把

#profile_photo img而不是#profile_photo figure，因爲HTML可能不呈現<figure>標籤

來源

2015-07-20 09:40:30 Arjun

爲什麼？你是在舊的瀏覽器？ –

填充實際上顯示，但如果你想給圖像以及圖像和文本之間的間距之間的一些空間，嘗試分配填充到標籤

img{ padding: 6px 8px 10px 8px; }

來源

2015-07-20 09:44:42

爲什麼CSS填充不顯示？

回答

相關問題