为什么不显示 CSS 填充？

Question

下面是index.html

的代码

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

Answer 1

尝试将

#profile_photo img 而不是 #profile_photo figure 因为 HTML 可能不会呈现 <figure> 标签

Answer 2

正如其他人评论的那样显示，您只是没有背景颜色才能看到它。如果您使用检查工具，您会看到填充物在那里。

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

Working example

Answer 3

实际显示的是填充但是如果你想在图像之间给出一些 space 并且在图像和文本之间给出 space 尝试将填充分配给标签

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

为什么不显示 CSS 填充？

Why is the CSS padding not displayed?

html

css

padding