CODEWITHSUNDEEP
htmlcss
Mak
Mak

Reputation: 2197

How to remove the margin between two images?

I've tried to set the margin and border to 0,but still not working.

<style type="text/css">
img {margin:0;}
</style>
<body>

<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />

How to make two images stay close to each other?

Upvotes: 5

Views: 22847

Answers (7)

Gary
Gary

Reputation: 13912

Comment-out the line break between them.

   <img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />

Why? HTML allows as many spaces (both breaking and non) for code formatting, but only displays the first. In your case, the images being on different lines is being interpreted as a space between them. The simplest solution is to put them both on one line, but that isn't as readable.

Upvotes: 7

Ala&#39; Alnajjar
Ala&#39; Alnajjar

Reputation: 798

Remove spaces between img tags and use css vertical-align:top

HTML:

<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>

CSS:

img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}

Upvotes: 0

Alejandro
Alejandro

Reputation: 11

I just had this problem, but couldn't find an answer to my problem, first i don't want my images to float left; second, using diplay:block is not a good idea because i want them in-line, also display:block in-line makes doesn't work.

The SOLUTION is quite easy, take out the "enter" and put your images in the same line. I explain:

WRONG

<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>

OK

<img src="flower1.jpg"/><img src="flower1.jpg"/><img src="flower1.jpg"/>

So hope it helps.

Upvotes: 1

Justin Samuel
Justin Samuel

Reputation: 1083

I would suggest to put each image in a individual div having style float:left. These 2 divs should be enclosed within a parent div which itself is float: left like,

<div style="float:left">
<div style="float:left">
<img src="/static/btnNext.gif" border="0" />
</div>
<div style="float:left">
<img src="/static/btnSave.gif" border="0" />
</div>
</div>

Upvotes: 0

Webking
Webking

Reputation: 1862

this css should stick the images close to eachother without any space, linebreaks or borders between the images...

<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>

Upvotes: 0

jay
jay

Reputation: 10325

You can eliminate the css for the image and put the image tags on the same line with no space.

<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />

Upvotes: 16

o.k.w
o.k.w

Reputation: 25810

<style type="text/css">
img {margin:0; float: left;}
</style>

Upvotes: 2

Related Questions