图像和边框之间的空间答案

【问题标题】：Space between image and border图像和边框之间的空间
【发布时间】：2021-02-01 19:29:35
【问题描述】：

为什么会有空格？我该如何解决？请帮帮我。

<div class="person-Description">
                    <img src="Person.png" alt="Danielle Harris">
                    <h1>Danielle Harris</h1>
                    <h3>Software Technician</h3>
                </div>

.person-Description{
            display: inline-flex; flex-direction: column;
            width: 100%; align-self: flex-start; text-align: center;
            align-items: center; justify-content: center;
        }
        .person-Description img{
            display: block; width: 60%; user-select: none;
            border-radius: 30px; border: 5px solid #FFFFFF;
        }

【问题讨论】：

您需要解释图像和边框之间的空间是什么意思。您的图像样式确实添加了一个白色的 5px 边框。边框半径：30px；边框：5px 实心#FFFFFF;

标签： html css border space

【解决方案1】：

我假设您的意思是图像本身和边框之间的小空间，几乎看不到。要解决此问题，您必须为图像添加背景颜色。背景颜色应与边框颜色相同。这样，小空间将在视觉上消失。因此，在您的情况下，只需将 background: #ffffff; 添加到您的 CSS 规则 .person-Description img。

.person-Description{
  display: inline-flex; flex-direction: column;
  width: 100%; align-self: flex-start; text-align: center;
  align-items: center; justify-content: center;
}
.person-Description img{
  display: block; width: 60%; user-select: none;
  border-radius: 30px; border: 5px solid #FFFFFF;
  background: #ffffff;
}

<div class="person-Description">
  <img src="Person.png" alt="Danielle Harris">
  <h1>Danielle Harris</h1>
  <h3>Software Technician</h3>
</div>

【讨论】：

【解决方案2】：

去掉 .person-Description img 样式中的白色边框

 .person-Description img{style
       display: block; width: 60%; user-select: none;  
  }

【讨论】：