为什么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填充不显示？

回答

相关问题