Удаление пробелов между элементами HTML при использовании разрывов строк

У меня есть страница с строкой около 10 imgс. Для удобства чтения HTML я хочу поместить разрыв строки между каждым imgтегом, но при этом между изображениями рендерится пробелы, что мне не нужно. Могу ли я что-нибудь сделать, кроме разрыва между тегами, а не между ними?

Изменить: вот скриншот того, что у меня есть. Я хотел бы, чтобы изображения корешка книги отображались в случайных комбинациях с использованием PHP. Вот почему мне нужны отдельные imgтеги.

Вы можете использовать CSS. Установка display: block или float: left на изображениях позволит вам определить свой собственный интервал и отформатировать HTML так, как вы хотите, но повлияет на макет способами, которые могут или не могут быть подходящими.

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

Извините, если это старый, но я только что нашел решение.

Попробуйте установить значение font-size0. Таким образом, белые промежутки между изображениями будут иметь ширину 0, и изображения не будут затронуты.

Не знаю, работает ли это во всех браузерах, но я пробовал это с Chromium и некоторыми <li>элементами с display: inline-block;.

Вы можете использовать комментарии.

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

Однако я бы беспокоился о семантике размещения ряда изображений рядом.

У вас есть два варианта без приблизительных действий с CSS. Первый вариант - использовать javascript для удаления дочерних элементов, содержащих только пробелы, из тегов. Однако более приятный вариант - использовать тот факт, что пробелы могут существовать внутри тегов, не имея смысла. Вот так:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexbox может легко исправить эту старую проблему:

.image-wrapper {
  display: flex;
}

Дополнительная информация о flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

В Firefox это довольно просто, просто установите word-spacing: -1emродительский элемент. По какой-то причине Chrome игнорирует это (и, насколько я тестировал, он игнорирует интервал между словами независимо от значения). Так что помимо этого я добавляю letter-spacing: -.31emк родителям и letter-spacing: normalдетям. Эта часть em - размер пространства, ТОЛЬКО ЕСЛИ ваш размер em стандартизирован . Firefox, в свою очередь, игнорирует отрицательные значения для межбуквенного интервала, поэтому не добавляет его к интервалу между словами.

Я тестировал это на Firefox 13 (win / ubuntu, 14 на android), Google Chrome 20 (win / ubuntu), браузере Android на ICS 4.0.4 и IE 9. И я испытываю искушение сказать, что это также может работать в Safari, но я действительно не знаю ...

Вот демо http://jsbin.com/acucam

Я опоздал (я просто задал вопрос и нашел его в соответствующем разделе), но думаю, display: table-cell; это лучшее решение

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

единственная проблема в том, что он не будет работать в IE 7 и более ранних версиях, но это можно исправить с помощью взлома

Используйте таблицу стилей CSS для решения этой проблемы, как в следующем коде.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

альтернативный текст http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3td8Capnnture.Pgle3td8Capnnture.Pgle3tdRJd2y

Тестирование на Firefox 3.5 Final!

PS. ваш html должен понравиться.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

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

На самом деле, нет. Поскольку <img>s являются встроенными элементами, средство визуализации HTML считает пробелы между этими элементами как истинные пробелы в тексте - избыточные пробелы (и разрывы строк) будут усечены, но отдельные пробелы будут вставлены в символьные данные текстового элемента.

Размещение <img>тегов абсолютно может предотвратить это, но я бы не советовал этого делать, так как это означало бы позиционирование каждого из изображений вручную в соответствии с некоторой пиксельной мерой, что может потребовать много работы.

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

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

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

Благодарим tech.co за такой подход.

пробел: начальный; Работает для меня.

Пробелы между элементами вставляются редактором HTML только в целях визуального форматирования. Вы можете использовать jQuery для удаления пробелов:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

Это отсоединяет дочерние элементы, очищает все оставшиеся пробелы перед повторным добавлением дочерних элементов.

В отличие от других ответов на этот вопрос, использование этого метода гарантирует сохранение унаследованных css displayи font-sizeзначений. Также нет необходимости использовать floatи громоздкие, clearкоторые потом требуются. Конечно, вам нужно будет использовать jQuery.

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

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

Что касается следующего лучшего ответа, использования font-size ... для меня это неприятный прием, который укусит вас позже, если вы задаетесь вопросом, почему ваш текст не отображается.

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

Проще говоря, я бы предложил либо иметь дело с изображениями, которые все находятся в одной строке вместе, либо использовать серверный скрипт для генерации контента / изображений.

Вместо использования для удаления CR / LF между элементами я использую инструкцию обработки SGML, потому что минификаторы часто удаляют комментарии, но не XML PI. Когда PHP PI обрабатывает PHP, он имеет дополнительное преимущество, заключающееся в полном удалении PI вместе с CR / LF между ними, что позволяет сэкономить не менее 8 байтов. Вы можете использовать любое произвольное допустимое имя инструкции, например, и сохранить два байта в X (HT) ML.

Вдохновленный ответом Квентина , вы также можете разместить закрывающий> рядом с началом следующего тега.

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

С семантической точки зрения, не лучше ли использовать упорядоченный или неупорядоченный список, а затем соответствующим образом оформить его с помощью CSS?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

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