Search code examples
htmlcssborder

1px border issue for img

So I am having an issue with 1px border for img. They have a strange distance between them and it becomes even worse when scaling (see codepen). I don’t have any idea where it is coming from and how to fix it.

My HTML:

<article class="comment">
    <div class="comment__image-block">
      <img class="comment__img" src="https://i.imgur.com/dSEAOsy.jpg" alt="Avatar" title="Avatar">
    </div>
  </article>

My SCSS:

 .comment {
  &__image-block {
    padding: 0;
    float: left;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    &:before {
      content: ' ';
      display: block;
      background-color: white;
      width: 60%;
      height: 10px;
      position: absolute;
      right: -11px;
      top: -2px;
      outline: 1px solid red;
      transform: skewX(53deg);
    }
  }
  &__img {
    width: 80px;
    height: 80px;
    border: 1px solid red;
  }
}

CodePen link

Image:

enter image description here

Solution

  • This time I fixed your problem by changing a part of your code to this:

    &__img {
    width: 80px;
    height: 80px;
    border: 1px solid red;
    box-sizing: border-box;
 }

    I hope it will work for you! Maybe there is a better way, because in this case the border is placed on the edge of the image, but I do not know the other way.