0

I've got a basic webpage, where the intent is to have boxes containing either one or two images. The boxes proceed left to right, wrapping whenever needed.

The padding between the images and the container boxes should be 5px all around. The padding is correct when a single image is contained in the box, but grows larger when a second image is added to the box. Adding a third image does not increase the padding further -- the only difference is between "one image" and "more than one image".

I don't understand what is causing the additional padding, so I can't figure out how to avoid or counteract it.

Any insights?

Here is the source of my webpage, followed by a screenshot of how it's rendering in both Chromium 25.0.1364.160 and Firefox 20.0, running on Linux Mint.

<html>
<head>
<style>
body { background:#FFDDBB; }
* { margin:0; padding:0; }
.wrapper { margin:5px 0 0 5px; float:left; border:1px solid black; padding:5px; background:white; }
</style>
</head>
<body>
<div class="wrapper">
<img src="http://placehold.it/200x200"/>
</div>
<div class="wrapper">
<img src="http://placehold.it/200x200"/>
<img src="http://placehold.it/200x200"/>
</div>
</body>
</html>

screenshot of webpage

DreadPirateShawn
  • 8,164
  • 4
  • 49
  • 71
  • 1
    But it isn't. http://jsfiddle.net/qTsFQ/ At least, in my attempt I ge the same (larger) padding with the first image as well. – GolezTrol Jul 28 '13 at 06:50
  • 1
    Does adding `img{vertical-align:bottom}` fix it? – Niet the Dark Absol Jul 28 '13 at 06:50
  • @Kolink: Yes it does (just tried while you were typing your comment) -- though I still don't understand why. I saw the suggestion here -- http://stackoverflow.com/questions/8522047/why-is-this-container-div-taller-than-required-to-wrap-the-image-it-contains?rq=1 -- though that compares the behavior to letter descenders. I'd like to know why the second image changes the behavior, assuming others can repro that aspect of the behavior. – DreadPirateShawn Jul 28 '13 at 06:52
  • I added a Fiddle with your exact code. At least on my machine, it works just fine. – lazyCrab Jul 28 '13 at 06:53
  • Fiddle noted, but is beside the point -- I've got a repro on multiple browsers, looking for an explanation of why. I'm less interested in a list of where it doesn't repro. Thanks though! – DreadPirateShawn Jul 28 '13 at 06:59
  • @DreadPirateShawn I just posted a reference question on this subject. http://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath/ – Niet the Dark Absol Jul 28 '13 at 07:03
  • @Kolink -- Thanks. Granted, I'm now more befuddled why the box containing a single image does NOT have the extra padding at the bottom, since GolezTrol (above) and your own reference question example both see the repro occur even with only a single image within the box. At this point, I'll tentatively chalk it up to a quirk of the Linux browser implementations, until a better explanation comes along. – DreadPirateShawn Jul 28 '13 at 07:46

2 Answers2

0

Try by setting display: inline-block;margin: 0; padding: 0; to your image.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • No dice. The "display" variations don't seem to have an impact, but "vertical-align:bottom" does. Per comment thread above, I'd still like to know why the behavior changes with the second image, if possible. – DreadPirateShawn Jul 28 '13 at 06:55
0

Summary of partial answer, as reached thanks to Kolink via comments above:

  1. img{vertical-align:bottom} is the fix.
  2. The extra padding is expected -- see reference questions White space at bottom of anchor tag (Icode4food) and Why does my image have space underneath? (Kolink)

Open question remains:

  • The single image without extra padding remains unexplained for now. Feel free to chime in if you can clarify that particular aspect of my original repro.
Community
  • 1
  • 1
DreadPirateShawn
  • 8,164
  • 4
  • 49
  • 71