CODEWITHSUNDEEP
htmlcss
makc
makc

Reputation: 1060

Why there is no gap between rows of less than 2 images?

So I have a bunch of images inside the div and, if they do not fit into window width, they are wrapped into several rows. The part I do not understand is, why there is a gap between these rows ONLY if there are more than 1 image in a row?

Code:

<style>
img {
    width: 350px;
}
</style>
...
<div>
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
</div>

Example: http://jsbin.com/juterinu/3

I can see this effect in both FF and Chrome.

Upvotes: 5

Views: 279

Answers (6)

dereli
dereli

Reputation: 1864

It's happening because of vertical-alignment of an image in Quirks mode.

Check out these excerpts from this page:

Vertical alignment of an image is under certain conditions to the bottom of the enclosing box, not to the baseline of text. This happens when the image is the only content within an element, typically a table cell. This means that e.g. an image in a table cell is by default at the bottom of the cell in Quirks Mode (which is often what the author wants), whereas in Standards Mode there is a few pixels spacing below the image (unless one sets e.g. vertical-align: bottom for the img element).

I guess, when the images are wrapped and there's only one image per line, it behaves like the image is the only content within an element.

And this one from Wikipedia:

Another notable difference is the vertical alignment of certain types of inline content; many older browsers aligned images to the bottom border of their containing box, although the CSS specification requires that they be aligned to the baseline of the text within the box. In standards mode, Gecko-based browsers will align to the baseline, and in quirks mode they will align to the bottom.

Since the question is why this is happening, not how to solve it and there's already a few solutions in other answers, I won't add how to solve it.

Upvotes: 3

Chris Wesseling
Chris Wesseling

Reputation: 6388

jsbin is misbehaving. It treats the inter-element-whitespace differently.

http://jsbin.com/juterinu/3 behaves differently from http://jsfiddle.net/yfvU2

A file ws.html (http://jsfiddle.net/yfvU2)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>With inter-element-whitespace</title>
  <style type='text/css'>
      img { width: 350px;}
  </style>
</head>
<body>
  <a href="no-ws.html">no-ws.html</a>
    <div id="images">
        <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
        <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
        <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
        <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
        <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
        <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    </div>
</body>
</html>

opened with Chrome or Firefox, shows a grid with space between the images.

Why?

The horizontal whitespace

There are multiple whitespace characters between them. These get collapsed to a single whitespace. And then rendered.

The vertical whitespace

The img-element is by default display: inline and vertical-align: baseline. So what you see is some leading.

A file no-ws.html (http://jsfiddle.net/yfvU2/2/)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Without inter-element-whitespace</title>
  <style type='text/css'>
      img {
          width: 350px;
          vertical-align: bottom;
      }
  </style>
</head>
<body>
  <a href="ws.html">ws.html</a>
  <div id="images"><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /></div>
</body>
</html>

will be rendered without whitespace.

Upvotes: 3

Sam Denton
Sam Denton

Reputation: 425

I have been messing around in jsfiddle and think it may have something to do with the default border-thickness being medium, as setting the border-thickness to 0px fixes for me. Other wise I don't know. Hope this helps (although I doubt it) :)

Upvotes: 0

Michael
Michael

Reputation: 477

The question yoy should ask is "why does the browser insert a gap between images, if I dont tell the browser to do so?"

Browsers do render a gap between images when there is a line break. Simples as that.

To solve it, just remove that line break and add the margin/padding by yourself. (http://jsbin.com/juterinu/5)

Upvotes: 2

goerwin
goerwin

Reputation: 1241

It happens due to the default spacing of the browser between words, you can try removing them and you'll see the gap disappears:

 <div>
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" /><img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
</div>

The browser recognizes when it has to add a gap between words. When there's just one word per line, the browser doesn't add the gap.

You can do an analogy like this (when an a represents an image tag):

 <p>a a a a</p>

In the case above you have four words, therefore the browser adds the gap both between and below that line.

But, if you have this,

 <p>aaaa</p>

Then the browser, doesn't add any gap since it's just one word!

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78560

It's caused by the line height. Images are display: inline by default and therefor have a bit of space if they wrap.

See http://www.quirksmode.org/css/quirksmode.html#t15

What you can do is either make them display:block and float:left or you can make them display:inline-block and give the parent container line-height: 0; font-size: 0;. Safari seems to have an issue with font size being zero, so if you have to support it, you can use font-size: 0.0001em; instead.

Upvotes: 1

Related Questions