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

Я показываю 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 пикселей, но это не работает. Так что же здесь происходит?


html css
person Aperture    schedule 06.01.2011    source источник

Ответы (4)


arrow_upward
16
arrow_downward

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

<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="..." />
person Floern    schedule 06.01.2011
comment
+1 Пробел возникает из-за того, что браузер перехватывает табуляцию/возврат между ними как пробел. - person Evan Mulawski; 06.01.2011
comment
Это очень легко ломается в зависимости от используемой вами IDE, я бы порекомендовал более надежное решение. - person jeroen; 06.01.2011

arrow_upward
7
arrow_downward

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

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

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

person jeroen    schedule 06.01.2011

arrow_upward
2
arrow_downward

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

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>
person Bob    schedule 29.12.2016

arrow_upward
1
arrow_downward

Оберните изображения в ul и поместите li:

<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

person Gemma    schedule 06.01.2011