时间戳

首页 > 解决方案 > 图像和边框之间的空间

html - 图像和边框之间的空间

问题描述

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

图片

<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;
        }

标签： htmlcssborderspace

解决方案

I assume that you mean the small space between the image itself and the border, which can hardly be seen. To fix this issue, you have to add a background color to the image. The background color should be the same color as your border. This way, the little space will disappear visually. So in your case, simply add background: #ffffff; to your CSS rule .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>

推荐阅读