Question 366828 in Html Question posted in
Some basic documentation can be found here.

White line around <img> element in HTML

When i add a element and reference what is supposed to be inside of it trough CSS a stupid white outline appears. Heres the code:

<div class="button"><img src="your-image-url.jpg"></div>

<style>
body {
    background-color: red;
    margin: 100px;
}

.button {
    padding: 0; /* Add this to remove padding /
    margin: 0; / Add this to remove margin */
}

img {
    width: 256px;
    height: 256px;
}
</style>

I have tried:

outline: none
border: none
box-shadow: none

nothing worked…

Tags:

2

Answers


  1. 0

    Check that this white stripe is not contained in the image itself, because everything works as it should for me.

    Login or Signup to reply.
  2. 0

    In your code, the .button class might have a margin because of a typo in the comment. Besides that, <img> are notorious for being display:inline and having a default margin in browsers. So try to set the image display: block

    body {
  background-color: red;
  margin: 100px;
}

.button {
  padding: 0;
  margin: 0;
}

img {
  width: 256px;
  height: 256px;
  display: block;
}
    <div class="button"><img src="https://picsum.photos/128"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search