Why Is There a Pesky Little Space Between <Img> and Other Elements

Why is there a pesky little space between img and other elements?

The img is a "replaced element" in HTML, and as such, is it treated as a character. Now in the absence of any styles, the image is aligned with the baseline of the other characters on the line.

So in other words, there is room for the descender underneath the image.

Changing it to a block removes this feature, as you noticed.

Space between div and img?

Add display: block; to the .separator image.

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

The problem is that images can sometimes add a bit of magic space up/below them, I have this issue whenever I'm working with image elements as *block* elements.

How do I get rid of the space between img elements in a row in a html page?

You have to remove the whitespaces (linebreaks & spaces) between the tags:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><img src='/UploadedImages/85.jpg' alt='' style="..." />

or make comments to keep linebreaks:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><!--

--><img src='/UploadedImages/85.jpg' alt='' style="..." />

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

You can:

• adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
• change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img {  vertical-align: middle;}
#align-base img {  vertical-align: bottom;}
#display img {  display: block;}

<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>
<div id="align-middle"><h1>vertical-align: middle</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>    <div id="align-base"><h1>vertical-align: bottom</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>
<div id="display"><h1>display: block</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>

Div Spacing between Images

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.

Why is there a gap from image to border-bottom?

Just give the image

display:block;

see updated fiddle

it should now looks like

Weird space between navbar pictures and picture

Images are aligned to baseline by default and are treated similarly to inline elements, so there is a little space at the bottom for the trailing characters in inline content. To remove it, use a different vertical-align value. Added vertical-align: top to those imgs.

*{padding:0;margin:0;}body{background-color:#242628;}.logo{margin:0;padding:0;}.logo img{float:left;margin-top:0.6%;margin-left:1%;margin-bottom:0;width:280px;height:75px;}.head{padding:0;margin:0;}.head ul{float:right;list-style-type:none;padding:0;margin:0;}.head ul img{width:100px;height:100px;padding:0;margin:0;vertical-align: top;}.head li{float:left;margin:0;padding:0}.head ul a{padding:0;margin:0;display:block;}.bakbild img{padding:0;margin:0}

<!DOCTYPE html><html><head>
    <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="css/gwfcss.css"></head>
<body><div class="head">    <div class="logo">        <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png">    </div>
    <ul>        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>             <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>         <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>    </ul></div><div class="bakbild">    <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png" style="width:100%;"></div></body></html>  

Space under img tag

Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).

The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.

The fix:

img {
  vertical-align: top;
}

I hope that helps someone who may have run into this problem.

Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.

However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.

I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.

Unwanted padding or gaps in html list of linked images

It's because you're treating the <li> elements as inline-blocks. These essentially act and flow as text characters, and if there is white-space between them in the HTML, then white-space will appear next to them on the page as well. You can either set font-size to be 0 within the <ul>, or use display: block and float: left instead to achieve your desired effect.

---

Related Topics