关于 img 标签底部边距的问题

Question

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

当我把#profile-pic的height和width改成100%，或者直接给#profile-pic加margin的时候，就可以了, 但我不明白为什么它在以下情况下不起作用？

#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>

Answer 1

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

Answer 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>

关于 img 标签底部边距的问题

Issue regarding bottom margin on img tag

html

css

margin