У меня есть базовая веб-страница, цель которой состоит в том, чтобы иметь блоки, содержащие одно или два изображения. Коробки идут слева направо, оборачиваясь по мере необходимости.
Отступы между изображениями и блоками-контейнерами должны быть 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>
img{vertical-align:bottom}
? - person Niet the Dark Absol   schedule 28.07.2013