Ответ 1

О, вы можете очень легко добиться того, что одна строка CSS:

#parent_of_imgs { white-space-collapse: discard; }

Недостаток, спросите вы? Ни один браузер не реализовал эту чрезвычайно полезную функцию (подумайте о встроенных блоках в целом).: - (

То, что я делал время от времени, хотя это уродливо, поскольку ночь темная, заключается в использовании комментариев:

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

  <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:)

Ответ 5

Самое новое решение для этого - использовать 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.

Ответ 6

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

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>

Ответ 7

<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)

Ответ 8

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

моя мини-вещь мини-штука мини-вещь мини-вещь

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

Ответ 9

Если вы используете 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;?>

Ответ 10

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

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

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

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

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

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

изменить

Что я использую для создания элемента 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 */
}

Ответ 11

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

img { display: table-cell; }

Ответ 12

Свернуть свой HTML!

Хорошей практикой является минимизация ответа до того, как он будет передан браузеру.

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