关于 img 标签下边距的问题答案

【问题标题】：Issue regarding bottom margin on img tag关于 img 标签下边距的问题
【发布时间】：2021-05-28 17:56:03
【问题描述】：

我正在尝试在个人资料图片和文本之间创建一些空间，但是当我将底部边距应用于图像时，它不起作用。我尝试设置display: block，但没有区别。为什么这不起作用？

当我将#profile-pic 的height 和width 更改为100%，或者当我直接向#profile-pic 添加边距时，它可以工作，但我不明白为什么它不能工作以下情况？

#about {
  height: 100%;
  width: 100%;
}

#profile-pic {
  height: 250px;
  width: 250px;
  margin: auto;
}

#profile-pic img {
  display: block;
  height: 100%;
  width: 100%;
  margin-bottom: 100px;
  box-shadow: 0 0 5px 1px rgb(255, 255, 255);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 38%;
}

<section id="about">
  <div id="profile-pic">
    <img src="https://data.whicdn.com/images/322027365/original.jpg?t=1541703413" alt="profile pic">
  </div>
  <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum autem sequi, est enim, eligendi voluptas et ut aspernatur nostrum laboriosam maxime itaque assumenda sapiente reiciendis, tenetur exercitationem culpa quia ea laudantium! Exercitationem
    quo quibusdam, sit quas perspiciatis aspernatur aliquam enim nihil assumenda omnis sunt sequi rerum quisquam. Nesciunt,

</section>

【问题讨论】：

标签： html css margin

【解决方案1】：

因为你有一个固定高度的父 #profile-pic 并且你的 img 元素有 100% 的高度，所以它会占用他的父空间 250px 和边距不会影响它只是溢出另一个元素没有对显示图像的真实效果。

【讨论】：

【解决方案2】：

把它交给你的 div 而不是你的图片

#about {
  height: 100%;
  width: 100%;
}

#profile-pic {
  height: 250px;
  width: 250px;
  margin: auto;
  margin-bottom: 100px;
}

#profile-pic img {
  display: block;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 5px 1px rgb(255, 255, 255);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 38%;
}

<section id="about">
  <div id="profile-pic">
    <img src="https://data.whicdn.com/images/322027365/original.jpg?t=1541703413" alt="profile pic">
  </div>
  <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum autem sequi, est enim, eligendi voluptas et ut aspernatur nostrum laboriosam maxime itaque assumenda sapiente reiciendis, tenetur exercitationem culpa quia ea laudantium! Exercitationem
    quo quibusdam, sit quas perspiciatis aspernatur aliquam enim nihil assumenda omnis sunt sequi rerum quisquam. Nesciunt,
</section>

【讨论】：

在帖子中已经提到给 div 是有效的，他/她在问为什么不为 img 标签工作。
是的，我没有意识到@SebMaz93