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 figure{
    padding: 6px 8px 10px 8px;
    float: left;
    position: relative;
    width: 200px;
    background: red;
}

Working example

Answer 2

填充实际上正在显示但是如果你想在图像和图像与文本之间的空间之间留出一些空间，请尝试将填充分配给标记

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

Answer 3

尝试放

#profile_photo img代替#profile_photo figure，因为HTML可能无法呈现<figure>代码

为什么没有显示CSS填充？

3 个答案: