Extra margin on side of an image in Chrome - html

<div>
<img src ='image.png' style="display: block" />
</div>
In Chrome, this renders a 1px margin on right side of the image and pushes wrapper div out. How to remove the margin?

Use the margin and padding in the style attribute as shown below:
<div>
<img src ='image.png' style="display: block; margin: 0px; padding: 0px;" />
</div>
In addition to this, you can also remove the border by adding the style "border:0px".
I have not tried it, let me know if it works.

Using CSS to remove only that will still make your website look different in other browsers. It's best to use a CSS reset to get the same formatting in all browsers.
CSS reset like this:
http://meyerweb.com/eric/tools/css/reset/

I saw this behavior in Safari as well. Try this.
<div class="group-holder" style="display: table;">
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
</div>
This worked for me.

Related

Why are my images not stuck together?

I have this simple HTML / CSS
<div class="image-group">
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/120x120" />
<img src="http://placehold.it/80x80" />
</div>
.image-group img {
margin: 0;
padding: 0;
}
JSFiddle
Why are the images not stuck together? I inspect the elements using Chrome's Inspector and it shows me nothing in between the images, yet they are spaced out.
I can get them to stick together by applying negative margins, but according to me, they should be sticking together anyways.
There's space in your html code. Try below
<div class="image-group">
<img src="http://placehold.it/80x80" /><img src="http://placehold.it/120x120" /><img src="http://placehold.it/80x80" />
</div>
Check out this blog post about dealing with spaces with consecutive inline-block elements such as images.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Margin top issues

<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>
What happens is that the image is displayed but the "Test span" message is printed on the right side of the image according to the margin-left:20px but the the margin-top doesn't do anything as the label shows towards the bottom of the image. I want it to show on the top like the image comes up but the label is showing at the bottom.
You can see it right here: http://jsfiddle.net/AMWjH/
Please help
You can change the vertical-align property to change how the elements display. I think that applying vertical-align: top to the image solves your problem:
Preview: http://jsfiddle.net/Wexcode/AMWjH/23/
Also, the reason why the margin-top and margin-bottom aren't affecting your span element is because span is an inline element. You can change it to inline-block or block to apply this margin (changing it to block will override vertical-align).
I'm not certain what you're asking for, but it sounds like you want the title to go to the right of the image, but aligned to the top. Am I understanding the question? Try this:
HTML:
<div class="titledImage">
<img src="/test.png" title="Hello" width="110" height="100" />
<p>The Title</p>
</div>
CSS:
.titledImage img {
float: left;
}
From what I gather, you want to wrap the text around the image. You just need to add an align attribute to you <img> tag:
<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>
Why are you structuring your code this particular way? Without fully knowing your limitations I'd strongly recommend doing something like this: (of course, take the inline styles out and put them in a stylesheet).
<div style="height: 140px; width: 150px;">
<p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>
<img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>
Let me know if this solves it for you. There is no reason to use margins & negative margins. In this particular case margin or padding would work on the image, though. As a rule, avoid negative margins if possible and only use them when absolutely necessary.
I hope this helps.

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

How to make <a> wrap around a small image with out padding?

I have the following:
<a href="#" style="border:solid 1px gray; line-height: 5px;">
<img src="x.gif" style="border:solid 0px gray;">
</a>
Lets say x.gif's dimensions are 5x5 px. How can i make the hyperlink wrap tightly around x.gif? Right now the width is right but there seems to be padding on top and bottom of x.gif.
Try something like this:
<a href="#" style="border:solid 1px gray; display: inline-block;">
<img src="x.gif" style="display: block;">
</a>
If you need to support IE7 then you'll probably have to replace the inline-block with block in an IE7-specific stylesheet.
Try adding margin:0; padding:0; to your image.
This is MSIE specific behaviour. It's sensitive to whitespace around the <img> tag as well.
To fix it, you could just remove any whitespace around it:
<img src="x.gif" style="border: 0;" width="5" height="5">
Note that giving a zero-wide border a color and style doesn't make sense, so I removed it from the image's style as well.
This worked for me across the latest browsers I tested on including IE9
<a href="#" style="font-size:0;text-decoration:none;">
<img src="x.png" style="border:1px red solid;">
</a>
However while it looked pretty close in IE6/7 they produced a weird artefact on the bottom let corner of the border. I had to mimic the look in IE6/7 by cheating the border with background-color and padding. I also had to give the A element "layout" using zoom:1 to get it to behave (and loose some extra padding).
<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
<img src="x.png" style="border:none">
</a>
Annoyingly this didn't work with the "Standards" browsers so you'd have to use conditional comments and target low versions of IE with their own styles if you can't live with the artefact.

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