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

Ответ 1

Вы можете использовать CSS. Настройка отображения: блок или поплавок: слева на изображениях вы можете определить свой собственный интервал и форматировать HTML, как хотите, но повлиять на макет таким образом, который может быть или не подходит.

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

У вас есть два варианта, не используя приблизительный материал с 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>

Ответ 5

После слишком много исследований, проб и ошибок я нашел способ, который, кажется, работает нормально и не требует вручную вручную устанавливать размер шрифта на дочерние элементы, позволяя мне иметь стандартизованный размер шрифта 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 Browser на ICS 4.0.4 и IE 9. И у меня возникает соблазн сказать, что это может также работать на Safari, но я действительно не знаю...

Здесь демо http://jsbin.com/acucam

Ответ 6

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

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

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

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

Ответ 7

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

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

alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG

Тестирование в 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>

Ответ 8

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

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

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

Ответ 9

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

.image-wrapper {
  display: flex;
}

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

Ответ 10

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

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

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

Кредит tech.co для этого подхода.

Ответ 11

Пробел между элементами помещается только в редактор 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.

Ответ 12

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

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

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

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

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

Ответ 13

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

Ответ 14

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

Ответ 15

Семантически говоря, не было бы лучше использовать упорядоченный или неупорядоченный список, а затем правильно его использовать с помощью 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, вы сможете стилизовать его так, как хотите, и удалить пробелы между книгами.