1

I have the following code:

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square .square-details {
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}

.button56:hover {
  opacity: 0.9;
  color: white;
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1 .square-image1 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square1 .square-details1 {
  padding: 20px 30px 30px;
}

.square1 {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .square1 {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    margin-top: 54px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 480px) {
  .square1 .square-image1 img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square .square-image img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square,
  .square1 {
    max-width: 460px;
    width: 100%;
  }
  .h11 {
    width: 100% !important;
  }
}

.containerE {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .containerE {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    overflow: hidden;
  }
}
<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container" style="display: flex; justify-content: space-between;">
    <div class="containerE" style="display: flex; justify-content: space-between;">
      <div class="square">
        <div class="square-image">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details">
          <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
          <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
          <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
        </div>

      </div>
      <div class="square1">
        <div class="square-image1">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details1">
          <h3 class="h11">My Career Advice To You: Take These Steps...</h3>
          <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
          <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
        </div>

      </div>
    </div>
  </div>
</section>

When you run the above code, open it on a new page, and then zoom out to 75%, you can start to see white lines show up around the border of the image. I would like to remove that. How would I do that?

If you are still unsure of what white lines I am talking about, then refer to the following image:

enter image description here

The white lines are around the border of the image. How would I remove them? The white line also might be the space between the image and the border, but is there any way to remove it?

Any suggestions?

Improve this question
3
  • remove border on image Commented Jul 15, 2021 at 2:23
  • But I just want the white spacing to disappear, not the border Commented Jul 15, 2021 at 2:32
  • I think the best way to solve this is to change it from an img element inside a div, to using the img as the background of the div. That way you can use the cover css attribute to avoid any whitespace gaps. Commented Jul 15, 2021 at 2:42

1 Answer 1

Reset to default
1

This is caused by some strange border rendering by the browser.

To solve this, you can apply an inset box shadow such that it isn't noticeable yet it masks the spacing when zooming out:

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square .square-details {
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}

.button56:hover {
  opacity: 0.9;
  color: white;
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1 .square-image1 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 5px solid #555;
}

.square1 .square-details1 {
  padding: 20px 30px 30px;
}

.square1 {
  max-width: 460px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .square1 {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    margin-top: 54px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 480px) {
  .square1 .square-image1 img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square .square-image img {
    height: 230px !important;
    border: 5px solid #555;
    padding-left: 0;
    padding-right: 0;
  }
  .square,
  .square1 {
    max-width: 460px;
    width: 100%;
  }
  .h11 {
    width: 100% !important;
  }
}

.containerE {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .containerE {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    overflow: hidden;
  }
}

img{
    box-shadow: inset 0 0 10px black;
}
<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container" style="display: flex; justify-content: space-between;">
    <div class="containerE" style="display: flex; justify-content: space-between;">
      <div class="square">
        <div class="square-image">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details">
          <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
          <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
          <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
        </div>

      </div>
      <div class="square1">
        <div class="square-image1">
          <img src="https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>

        <div class="square-details1">
          <h3 class="h11">My Career Advice To You: Take These Steps...</h3>
          <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
          <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
        </div>

      </div>
    </div>
  </div>
</section>

Comparison

With inset box-shadow Without inset box-shadow
enter image description here enter image description here

(click to enlarge)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

a little overflow on chrome
@Spectric, hey could you state what you changed/added/removed in my code? I can know exactly what you added that way and use it in the future! Thanks!
@CodeUser2300 I added img{ box-shadow: inset 0 0 10px black; }
@Spectric, just a question, why did you add 10px in the box-shadow? Instead of 10px, can I use 20px?
@CodeUser2300 At 10 pixels the inset shadow usually covers up the white spacing. Beyond that increasing the box shadow will only affect the image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.