Как избавиться от пробела между элементами <img> в строке на html-странице?

Question

Я показываю 3 <img> в ряд, как это:

<div style="width: 950px">

                <img src='/UploadedImages/86.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/85.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/84.gif' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

        </div>

Как видите, у меня тонкие черные рамки вокруг изображений. Моя проблема заключается в том, что между границами соседних изображений есть пробелы шириной около 5 пикселей, и я установил поле равным 0 пикселей, но оно не работает. Так что здесь происходит?

Answer 1

Вы должны удалить пробелы (разрывы строк и пробелы) между тегами:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><img src='/UploadedImages/85.jpg' alt='' style="..." />

или комментируйте, чтобы сохранить разрывы строк:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><!--

--><img src='/UploadedImages/85.jpg' alt='' style="..." />

Answer 2

img является встроенным элементом (вроде...), поэтому пробелы и новые строки отображаются в вашем div, Чтобы избежать этого, вы можете перемещать изображения, но тогда вам также необходимо добавить переполнение в контейнер:

div {
  overflow: hidden;
}
div img {
  float: left;
}

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

Answer 3

Вы можете избавиться от пробелов, установив размер шрифта на контейнере в ноль;

CSS

.imgContainer { 
    font-size: 0px ; 
    white-space: nowrap; 
}

HTML

<div class="imgContainer">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

Answer 4

Оберните изображения в ul и отправьте их:

<div style="width: 950px">
 <ul>
  <li><img src='/UploadedImages/86.jpg' alt='' /></li>
  <li><img src='/UploadedImages/85.jpg' alt='' /></li>
  <li><img src='/UploadedImages/84.jpg' alt='' /></li>
 </ul>
</div>

а затем мы добавляем display:block; img css:

 ul li {
 float:left;
 display:inline;
 list-style:none;
 }
 ul li img {
 border: 1px solid #000;
 display:block;
 padding: 0;
 width: 300px;
 }

jFiddle demo