How to remove the margin between two images? - html

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?

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

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.

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

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.

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>

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>

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;
}

Related

Div Spacing between Images

Dear Members of this amazing Forum
I recently started using Html again and for the love of God i can't figure out where the problem is.
I created 3 Div's, each with 1 image, 1 group of images, and 1 image again. (same problem if all are in the same div, with a rather basic Css)
.HeaderNav {
margin: 0;
padding: 0;
overflow: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: hidden;
display: block;
}
And the Html to use it.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
<img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
<img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
<img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
<img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
<img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
<img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
<img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
<img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
<br/>
</div>
What results in the image below, sadly i don't get where the little space is from. Or why it's not on top too. Somehow i'm really confused where this issue is from and i'd realy appreciate the help.
[2]: http://i.imgur.com/SIkB7Hs.png <-- this one schould be a bit more clear sorry about that
edit: if found a rather face-> wall way to fix it with margin-top. And just making a div class for everyline. What's probably not the best way to go.
Ok, a few things here.
For one, with questions like this, it helps people answering a LOT if you post your code in a JSFiddle, like this here (though the images don't show there because they're relative URLs).
Also, it seems if you float the images to the left you can get rid of the spacing:
.HeaderNav img {
float: left;
}
Just to note, I have no idea why the spacing existed in the first place. Another tip: you should use 'Inspect Element' in Chrome or Firebug in Firefox to take a look at elements and see padding, margins, etc. Usually that makes it obvious where whitespace is coming from, though in this case I found nothing. Floating to the left was just an idea that seemed to work.
Probably because your <img> are still being declared as inline-level elements. Use:
.HeaderNav img {
display: block;
}
Also, you should check if a margin or padding have been assigned to the image element. If you do, reset them.
Also, make sure your padding and margin are 0 for the html and body...
so, try this:
body, html {
margin: 0;
padding: 0;
}
HTML cannot be used on it's own; it has to have CSS working with it continuously.
A bit confusing question, I don't understand it all. But check this jsFiddle. Is this what you mean?
Also remove the HeaderNav class from the first image.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>
The img element default display type like inline-block, because of the font-size, so the img element maybe have 3px space.
To solve this problem, you can use the code below:
.HeaderNav img {
display: block;
}
or
.HeaderNav img {
float: left;
}
They all will change the img elements display type, I recommend the first one.

Vertically Center Two Lines of Text Between Two Images

<body>
<div id="banner">
<img id="img1" src="leftimage.gif" alt="" width="" id="headImg" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
<img id="img2" src="rightimage.gif" alt="" width="" id="headImg2" />
</div>
. . . more stuff down here
In CSS I have float: left for img1. On img2 I have float: right; and clear left;
I've been playing with this for hours with no success. What I'd like to do using CSS is center vertically the text between these two images. I'd also like to place it up against the left image, maybe a few pixels off.
Additionally I want to be able to set the font-size and other attributes (bold, color, etc.) of each of the two lines of text.
Can someone please put me on the right track? Nearly everything I try puts the text under the banner div completely. What am I missing?
Thanks.
If you put the p tag after the images, it will float up between the images and you can position it accordingly. You don't need clear:left on the right image and keep in mind that you can only have one id attribute on an element, not two. The images have two ids in your code, so I removed one.
<div id="banner">
<img id="img1" src="leftimage.gif" alt=""/>
<img id="img2" src="rightimage.gif" alt="" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
</div>
#img1{
float:left;
}
#img2{
float:right;
}
You can see this working here: http://jsfiddle.net/duq6R/
First off, you will need to remove the floats on the images and paragraph.
Second, you need to make both images and paragraphs display:inline-block;. Now, you can use vertical-align: middle; to achieve your desired effect.
#banner {
overflow: hidden; /*this is a cheap clearfix*/
text-align: center;
}
#banner img, p {
display: inline-block;
vertical-align: middle;
}
See this JS Fiddle.

How to make the <img> tags line up horizontally in the div?

I need to make the images show up side by side horizontally in the div. How can I do that?
HTML:
<div class="Wrapper">
<img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Reference: jsFiddle
You could also use css properties display:inline-block or float : left to achieve this.
HTML Code
<div>
<img ... />
<img ... />
<img ... />
</div>
CSS Code
div img{ display: inline-block;}
or
div img{ display: block;float: left;margin-right: 5px;}
On the general assumption of your code being something like this
<div>
<img ... />
<img ... />
<img ... />
</div>
Then, a simple CSS property will get the job done.
div img { display: inline; }
On seeing your HTML portion. You can use the following CSS to get them online.
.partners img { display: inline; }
Rather than using inline, which robs you of a lot of the control that comes with block elements, or changing their vertical align, I'd float them:
<html>
<head>
<style>
div.img_holder img
{
float: left;
}
</style>
</head>
<body>
<div class = "img_holder">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
Floating is a peculiar science of its own in CSS; it's very much worth learning as it can yield some very powerful results. For example, were these divs, and not images, using inline would keep you from setting their height. Inline also affects how margins and padding work. vertical-align is inconsistent between browsers and, if I'm not mistaken, shouldn't actually yield the results you're looking for, at all.
now you can used to
Your default link is http://tinkerbin.com/ob9HFOA4
Css
img{
display: inline-block;
vertical-align: top;
}
live demo http://tinkerbin.com/a5BxIZrs
Firts of all, in order not to mess up your other images you're probably going to add, do this:
.Wrapper img{ float: left; }
This will float all your images within the .Wrapper class to the left. If all images in the page where these css rules are called will be aligned to the left, do this:
.Wrapper img{ float: left; }
EDIT: Add this rule to .Wrapper
.Wrapper{ width: 100%; }

Where this gap comes from and how to get rid off it?

Simple code:
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
<img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Two images have margin and padding of 0 but there's still a gap between them.
How to avoid this behavior?
And YES that's not a mistake, the whole thing has to be in A tag.
Example:
http://jsfiddle.net/fqrfU/
I believe it's the line-height that's causing the problem. Check it out.
On a different note, I know you said it was intended to be that way but it's actually invalid(?) HTML to have the div tag inside of the anchor. Try using spans instead.
The two images are displayed inline. This means the baseline of the image is aligned with the baseline of the text. Below text there usually is some more space to account for letters like pjgq that go below the baseline.
Just making the images display: block; resolves this in your scenario.
This page describes your situation quite clearly: http://devedge-temp.mozilla.org/viewsource/2002/img-table/
add in both display:block;
Demo: http://jsfiddle.net/fqrfU/22/
You can float and clear them:
img {
clear: both;
float: left;
}
http://jsfiddle.net/lukemartin/fqrfU/11/
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Are you having a problem in IE?
Try putting both images tags on the same line in the HTML, w/o any spaces in between...
Simply your css by doing,
.image, .shadow {
margin: 0;
padding: 0;
display:block;
}
http://jsfiddle.net/fqrfU/43/
What Bogdan said, or:
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img
src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
See, the whitespace between /> and the second <img is actually rendered, which gives the space between the two pics.
-- pete
This worked for me just now:
img
{
display: block;
}

Images side by side without any space between them

I have a grid of images with space between them. How do I remove this space?
I have already tried setting the padding and margin of the images to 0px but it has not worked.
Any ideas?
Make sure you don't have any spaces in your html markup. So change:
<img src="" alt="" /> <img src="" alt="" />
to
<img src="" alt="" /><img src="" alt="" />
Sometimes spaces can hide at the end of new lines too, so be sure to check the end of lines if your html looks like
<img src="" alt="" />
<img src="" alt="" />
Edit
Instead of writing: <img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" /> 87 times, just put this in your css file:
div img { margin: 0;
width: 300px;
height: 300px;
}
and then you can simply make your images <img src="imgs/img8.jpg" alt="img8" />
add font-size:0px to the div, then you can continue keeping the img elements on separate code lines
If you use float: left on the images, and separate each row with a breaker with a clear: both then there should be no spaces between the images.
The parameters you need to zero are padding, border and margin. On the images themselves and any container in between.
Try putting two images on the same line like:
<img src="imgs/img0.jpg" style="margin: 0; width: 300; height: 300;" /><img src="imgs/img1.jpg" style="margin: 0; width: 300; height: 300;" />
and see if that changes anything. I also suggest you follow the advice about using CSS to simplify all of the image styles. Because right now, you'd have to manually change every value by hand if you wanted to change the image sizes.
Unfortunately, HTML has some silly white-space problems sometimes.