CODEWITHSUNDEEP
htmlcssimage
yossi
yossi

Reputation: 13315

remove border from img tag

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 enter image description here

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

Upvotes: 0

Views: 2539

Answers (4)

Miorita
Miorita

Reputation: 340

<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

Upvotes: 0

Atle
Atle

Reputation: 1877

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" />

Upvotes: 4

jrd1
jrd1

Reputation: 10716

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/

Upvotes: 3

Mike
Mike

Reputation: 1999

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

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

See how it works.

Upvotes: 0

Related Questions