Откуда возникает пространство вокруг элементов img?

Мне нужно было создать спрайт изображения, используя десять прозрачных PNG-файлов размером 16 пикселей. Поэтому я собрал простую HTML-страницу с моими 10 изображениями внутри div с цветом фона. Я добавил несколько простых CSS, чтобы div соответствовал содержимому и удалял отступы, поля и т. Д.Откуда возникает пространство вокруг элементов img?

В Firefox с использованием Firebug я исследовал ширину div и нашел, что он измеряет 196 x 21 пиксель. Я вижу отчетливо пробел между изображениями. Насколько я могу судить, у меня нет полей, дополнений или границ.

Если вместо этого я плаваю изображения внутри div, я получаю измерение 160 x 16 пикселей (это то, что я ожидал изначально).

Я также просмотрел эту страницу в Chrome и IE и получил идентичные результаты. Итак, я полагаю, что поведение должно описываться в стандартах где-то?

Мне любопытно, откуда возникает дополнительное свободное пространство вокруг изображения?

(Извиняюсь, если это был дан ответ в другом месте)

источник

2013-03-13 Mark McLaren

Не могли бы вы заново его создать в jsfiddle –

Это просто звучит, как белый между вашими <img /> тегами.

Если ваш HTML является:

<img src="/path/to/image/1.png" /> 
<img src="/path/to/image/2.png" /> 
<img src="/path/to/image/3.png" />

Тогда вы получите пробелы между изображениями так же, как вы получите пространство между вашими словами, если вы написали их на разных строках.

Если вы написали свой HTML следующим образом:

<img src="/path/to/image/1.png" /><img src="/path/to/image/2.png" />

Тогда не будет пустого пространства между изображениями.

Это «ожидаемое» поведение inline и inline-block элементов (img элементов: inline-block).

Существует несколько способов обойти это, как показано в статье Криса Койера Fighting the space between inline block elements.

источник

2013-03-13 09:01:02

Огромное спасибо, это имеет смысл. Хотя я не совсем уверен, почему возврат каретки приравнивается к небольшому разрыву, но, вероятно, имеет смысл в текстовом контексте. –

@MarkMcLaren, если вы помещаете несколько пробелов между двумя словами, тогда браузер будет показывать только одно пространство - это то же самое поведение с возвратом каретки. Что касается браузера, это просто пробел между элементами 'inline' /' inline-block' –

Вы имеете в виду нижнее пространство? Если это так у меня есть ответ на подобный вопрос на

https://stackoverflow.com/a/15357037/1061567

Если мы говорим о другой проблеме, пожалуйста, сделать его более ясным, показывая нам некоторый пример в http://jsfiddle.net

источник

2013-03-13 09:00:57 zdesam

Откуда возникает пространство вокруг элементов img?

ответ

Смежные вопросы