Div Spacing between Images - html

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.

Related

image with link and keep it centered

Hi I am trying to add an image with a link and keep it centered and my code isn't working can you help?
<img src="flower.jpg" width="82" height="86" class="centerImage" " title="White flower" alt="Flower">
Just add some style to change <img /> from inline element to block element and use margin to center it.
For example
img {
display: block;
margin: 0 auto;
}
<a>
<img width="80" src="https://images.unsplash.com/photo-1659574087501-92ef4aa7b2d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="demo"/>
</a>
Hope this might help you

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/

Placing & Positioning images using CSS?

Edited this question entirely, not sure if it made sense previously.
Ok, I am having difficulty positioning some images on a website. I am using the slidedeck jQuery slideshow, and in the third slide I want a portfolio of work, so just to display 6 images (2 rows of 3).
In the index.html the slides are set up as follows;
<div id="slidedeck_frame" class="skin-voyager">
<dl class="slidedeck">
<dt>ABOUT US</dt>
<dd>About the company here</dd>
<dt>OUR SERVICES</dt>
<dd>Company services here</dd>
<dt>PORTFOLIO</dt>
<dd>Images of completed work here</dd>
<dt>Contact Us</dt>
<dd>Contact form here</dd>
</dl>
</div>
Each of these slides is formatted in the CSS sheet with the following tag;
.slidedeck dd.slide_1
In the third slide, I need to be able to simply show rows of images using the CSS to position them. I have tried a number of things but can't get it right. In the index.html I have tried;
<dt>PORTFOLIO</dt>
<dd><img src="images/myImage1.png" width="130" height="130" />
</dd>
But that obviously just display an image, with no ability to format it.
I have also tried;
<dt>PORTFOLIO</dt>
<dd>
<div>
<img id="image1" src="images/myImage1.png" width="130" height="130">
</div>
</dd>
and then using the following CSS to position;
img#image1 {
position: relative;
top: 20px;
left: 10px;
z-index: 5;
}
But the image just doesn't show up at all.
Any suggestions?
You are styling with dd.slide_1 but none of the <dd> elements have that class applied.
Edit
Given this html:
<dl class="slidedeck">
<dt>PORTFOLIO</dt>
<dd>
<img src="images/myImage1.png" width="130" height="130" />
<img src="images/myImage2.png" width="130" height="130" />
<img src="images/myImage3.png" width="130" height="130" />
<img src="images/myImage4.png" width="130" height="130" />
<img src="images/myImage5.png" width="130" height="130" />
<img src="images/myImage6.png" width="130" height="130" />
</dd>
You should be able to style your images like this
.slidedeck dd img {
/* add whatever styles you want */
}
If that isn't working try adding !important after your style values. If this works investigate what CSS (perhaps from jQuery plugins) is interfering with your styles. Try not to leave !important in if you can help it.
So for 2 rows of 3 images you would need this css
.slidedeck dd {
width: 390px; /* 3x your image width */
overflow: hidden; /* To contain floats */
}
.slidedeck dd img {
float: left;
display: block;
}

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.