CODEWITHSUNDEEP
htmlcssborderspace
Hispefastu
Hispefastu

Reputation: 1

Space between image and border

Why is there a space? How can I fix that? Please help me.

Image

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

Upvotes: 0

Views: 645

Answers (2)

Adriatic
Adriatic

Reputation: 1287

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>

Upvotes: 1

sonali
sonali

Reputation: 758

get rid of the white border in .person-Description img style

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

Upvotes: 0

Related Questions