html - remove border from img tag

Question

I am trying to remove a white border i get around img tag.

img 
{
    margin:0px;
    padding:0px;
    border : none;
}

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">         
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">        

code example at JSfiddle

As you can see

there is a white margin between the images. How can i remove it ?

Answer 1

The white margin between the images is actually a space character. In your code, this is the newline between the images, which is implicitly converted to a space in the browser.

All sequences of whitespace charaters (tabs,newlines,spaces) are in HTML converted to one single space character.

You can use this trick to avoid the space character between tags:

<img src="img.jpg" alt="My image" width="100" height="100" /><img 
src="img.jpg" alt="My image" width="100" height="100" />   

Answer 2

Remove the whitespace that separates the img tags:

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">   

http://jsfiddle.net/aW4Wx/2/

Answer 3

Add float: left; to the img's css. Like this:

img {
    margin:0px;
    padding:0px;
    border : none;
    float: left;
}

See how it works.

Answer 4

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg"><!--         
--><img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">

I am solving in this manner