вы можете установить font-size на контейнер до 0 и white-space исчезает!

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

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

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

к сожалению, новые строки считаются пробелами.

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

  <img src="images/minithing.jpg" alt="my mini thing" 
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

это тоже не идеально, я знаю. Но, по крайней мере, это не какой-то причудливый взлом CSS, который зависит от размера, который отображается символ пробела или прибегает к относительному позиционированию или JavaScript :)

самое новое решение для этого использует display: flex на внешнем контейнере, вы можете попробовать это с помощью следующего примера:

Codepen →

(и да, Flexbox становится широко поддерживается:http://caniuse.com/#search=flexbox)

HTML:

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

обновление: кроме того, если вы хотите, чтобы ваши элементы обернуть (как стандарт элементы встроенного блока делают), не забудьте добавить flex-wrap: wrap к вашему контейнеру flexbox.

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

хорошо, мне может повезти в том, что мне нужно только беспокоиться о том, чтобы это работало в webkit (в частности, встроенном в QT), поэтому он также работает в Chrome и Safari. Кажется display: table-cell имеет все преимущества дисплея: inline-block, но без пробелов недостаток (думаю, отступы td)

что было так сложно в этом решении?

css

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

html

<span class="no-whitespace">

    <a href=# title='image 1'>
       <img src='/img/img1.jpg' alt='img1'/>
    </a>

    <a href=# title='image 2'>
       <img src='/img/img2.jpg' alt='img2'/>
    </a>

    <a href=# title='image 3'>
       <img src='/img/img3.jpg' alt='img3'/>
    </a>

</span>

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

мой мини мини мини мини вещьмоя вещьмоя вещьмоя вещь

используйте my mini thing. (точка плюс пробел в конце) как alt текст или нажмите изображения с CSS вместе. Не просто удалите пробелы в коде.

Если вы используете php, это работает чудесно. Я нашел решение здесь.

Я изначально искал что-то, чтобы удалить текстовые узлы, состоящие только из whitespace после разбора html что-то вроде simplexml, но это намного дешевле.

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
    <img src='./mlp.png'/>
    <img src='./dbz.png'/>
    <img src='./b10af.png'/>
    <img src='./fma.png'/>
<?ob_end_flush;?>

Это простой вопрос и ответ не так прост.

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

затем вы можете попробовать использовать левые плавающие изображения. Но это опасно. Сначала у вас действительно нет контроля над вертикальным выравниванием по определению. А во-вторых, вы бежите в полный хаос, если у вас так много плавающих элементов, что они растягиваются более чем на одну линию. И если у вас есть макет, который опирается на левые плавающие элементы (большинство из них делают это сегодня), вы даже можете сломать некоторые внешние плавающие стили, Если вы очистите плавающие после изображений. Это может быть переопределено, если вы плаваете вокруг элемента. Скорее не рекомендуется.

таким образом, единственным решением будет объявление CSS, которое обрабатывает процесс обработки пробелов. Это не часть любого стандарта (так как CSS 3 еще не закончен).

Я предпочитаю отсутствие пробелов в HTML-варианте. С помощью drupal как CMS это может быть достигнуто довольно легко в вашем шаблоне.php и тематические файлы. Затем я выбираю встроенный блок.

С. П.: inline-block довольно сложно получить в разных браузерах. Для FF 2 вам нужен дисплей:-moz-inline-box. Остальные и IE8 могут иметь дисплей: встроенный блок сразу после. А для lte IE 7 вам нужен дисплей: встроенный в следующий отдельный объявление (предпочтительно через условные комментарии).

edit

что я использую для создания элемента inline-block

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}

попробуйте этот CSS:

img { display: table-cell; }

минимизировать HTML!

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

Так что если вам не нужно пространство (и вы жестко закодировали его с помощью  ), вы всегда удаляете пробелы в процессе минификации.