почему нижнее заполнение больше с двумя изображениями, чем с одним изображением?

У меня есть базовая веб-страница, цель которой состоит в том, чтобы иметь блоки, содержащие одно или два изображения. Коробки идут слева направо, оборачиваясь по мере необходимости.

Отступы между изображениями и блоками-контейнерами должны быть 5 пикселей по всему периметру. Заполнение корректно, когда в поле содержится одно изображение, но увеличивается, когда в поле добавляется второе изображение. Добавление третьего изображения не приводит к дальнейшему увеличению отступа — единственная разница между «одним изображением» и «более чем одним изображением».

Я не понимаю, что вызывает дополнительное заполнение, поэтому я не могу понять, как избежать этого или противодействовать этому.

Любые идеи?

Вот источник моей веб-страницы, а затем скриншот того, как она отображается в Chromium 25.0.1364.160 и Firefox 20.0, работающих на 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>

снимок экрана веб-страницы


person DreadPirateShawn    schedule 28.07.2013    source источник
comment
Но это не так. jsfiddle.net/qTsFQ По крайней мере, в моей попытке я получаю такое же (большее) заполнение с первым изображением также.   -  person GolezTrol    schedule 28.07.2013
comment
Исправит ли это добавление img{vertical-align:bottom}?   -  person Niet the Dark Absol    schedule 28.07.2013
comment
@Kolink: Да, это так (только что попробовал, пока вы печатали свой комментарий) - хотя я до сих пор не понимаю, почему. Я видел предложение здесь - contains?rq=1" title="почему этот контейнер div выше, чем требуется для переноса содержащегося в нем изображения"> stackoverflow.com/questions/8522047/ -- хотя это сравнивает поведение с выносными элементами. Я хотел бы знать, почему второе изображение меняет поведение, предполагая, что другие могут воспроизвести этот аспект поведения.   -  person DreadPirateShawn    schedule 28.07.2013
comment
Я добавил Fiddle с вашим точным кодом. По крайней мере на моей машине все работает.   -  person lazyCrab    schedule 28.07.2013
comment
Фиддл отметил, но это не относится к делу - у меня есть репродукция в нескольких браузерах, ищу объяснение, почему. Меня меньше интересует список, где он не воспроизводится. Спасибо хоть!   -  person DreadPirateShawn    schedule 28.07.2013
comment
@DreadPirateShawn Я только что опубликовал справочный вопрос по этой теме. stackoverflow.com/questions/ 17905827/   -  person Niet the Dark Absol    schedule 28.07.2013
comment
@Колинк - спасибо. Конечно, теперь я больше озадачен, почему коробка, содержащая одно изображение, НЕ имеет дополнительного заполнения внизу, поскольку GolezTrol (выше) и ваш собственный пример справочного вопроса видят, что воспроизведение происходит даже с одним изображением внутри коробки . На данный момент я предварительно спишу это на особенность реализации браузера Linux, пока не появится лучшее объяснение.   -  person DreadPirateShawn    schedule 28.07.2013


Ответы (2)


Попробуйте установить display: inline-block;margin: 0; padding: 0; на свое изображение.

person Bhojendra Rauniyar    schedule 28.07.2013
comment
Нет игральных костей. Варианты отображения, похоже, не имеют значения, но вертикальное выравнивание: снизу влияет. В ветке комментариев выше я все же хотел бы знать, почему поведение меняется со вторым изображением, если это возможно. - person DreadPirateShawn; 28.07.2013

Резюме частичного ответа, полученного благодаря Kolink через комментарии выше:

  1. img{vertical-align:bottom} — это исправление.
  2. Ожидается дополнительное дополнение – см. справочные вопросы White пробел внизу тега привязки (Icode4food) и Почему мой внизу изображения есть место? (Колинк)

Остается открытым вопрос:

  • Одно изображение без дополнительного заполнения пока остается необъяснимым. Не стесняйтесь вмешаться, если вы можете прояснить этот конкретный аспект моего оригинального репродукции.
person DreadPirateShawn    schedule 28.07.2013