Why are my images not stuck together? - html

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/

Related

Removing spacing in Images

How do you remove unneeded space around images in HTML?
One of my images is coming to far away from the text, and it is messing up the look of the website. There is nothing wrong with the CSS I am using, but I believe because that there is too many HTML tags around it, it has a large space.
Please limit solutions to basic CSS and HTML, as per I can properly understand how it works.
EDIT: I am sorry, I was a bit vague about what my challenge was. I am using the Bootstrap Library, and have been looking a this following template:
http://www.markups.io/preview/varsity/
I really like the template, and I am occasionally taking code snippets out of it. I used the top bar, and replaced their logo with a different image. The image looks fine on desktop, but when a go on my mobile phone, it comes out what too low covering some important content. Anything you guys can do?
EDIT 2:
I have attached two photos of the look and what the problem looks like. The first one is the Desktop view (which is great), and the second one is the mobile view (which is too low). I don't have any more information... from the original post to EDIT 1, EDIT 2, that is all the info that I have.
Remove the spaces and line breaks between images:
<img src="http://placehold.it/20x20" /> <img src="http://placehold.it/20x20" />
<img src="http://placehold.it/20x20" />
to:
<img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" />
Put this in your css file:
img {
margin: 0;
}
or use this in-line style in your html file:
<style type="text/css">
img {
margin: 0;
}
</style>
You can use the letter-spacing propriety of CSS
img {
letter-spacing: -2px;
}
I think you should remove space between your code!
so you must change this code
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
to this code (add comment code)
<img src="1.jpg" /><!--
--><img src="2.jpg" /><!--
--><img src="3.jpg" />
or to this code (literally remove space)
<img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" />
Since the template uses twitter bootstrap,
try adding img-responsive class to your image
Example, from:
<img src="1.jpg" />
to
<img class="img-responsive" src="1.jpg" />

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.

CSS Placement on Web Page

+-------------------------------------------------------------------------------+
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** PPPPPPPPPPPPPPPPPPPPPPPPPPP |
|*************** |
|TTTTTTTTTTTTTTTTTTTTTTTT |
| |
|-------------------------------------------------------------------------------+
Sorry for the sketch here. I tried to attach a screen shot, but I couldn't get it to show up. (I'll try to fix it later on another computer if this doesn't explain enough)
EDIT: This might help visualize it... http://jsfiddle.net/T3y6E/embedded/result/
I have a <div> on a personal web page I am working on. The * represent an image placement. The "H" represent a title placement. The "T" represent a slogan placement. I am trying to move the slogan over so that it is directly below the Title (wanted placement represented by "P")
Here is my HTML for this portion of the page:
<div class="logo-image">
<img src="~/Images/Atlas.png" height="125" width="150" alt="Atlas Logo" />
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>
Here is css that affects it:
.logo-image {
float: left;
margin: 0px 20px 0px 0px;
}
The effect you're looking for is float. It must be applied to the element you want to be floating, in this case the first image. And the element (with float) must be placed before the element you want it to float from, in your case the title and slogan.
I've created a fiddle with your code to show the concept: http://jsfiddle.net/3xV5Z/1/
Just a reminder: Your slogan is too big. Float won't work well with it if you don't manage your images width.
My answer is very similar to LcSalazar's. It uses your css.
<div>
<span class="logo-image">
<img src="http://placekitten.com/150/125" height="125" width="150" alt="Atlas Logo" />
</span>
<img style="vertical-align:top" src="http://placekitten.com/820/85" height="85" width="820" alt="Atlas Logo" />
<div>*A southpaw's approach to bowling*</div>
</div>

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.