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

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

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

Скриншот

17 ответов

Решение

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

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

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

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

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

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

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

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

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

.image-wrapper {
  display: flex;
}

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

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

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

альтернативный текст

Тестирование на 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 за этот подход.

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

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

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

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

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

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

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

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

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

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

нет пробелов:

      <ul>
<li><a>link</a><span>icon</span></li>
</ul>

пустое пространство:

      <ul>
<li>

  <a>link</a>

  <span>icon</span>

</li>
</ul>

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

Чтобы исправить это, я отобразил каждый li как гибкий объект, и пробелы были удалены без необходимости удалять их из реального HTML. Обратите внимание: вы также можете попробовать использовать display: table; но он работает только в Chrome, а не в Firefox.

      ul li {
display: flex;
}

См. демонстрационный код. Надеюсь это поможет.

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

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

Другие вопросы по тегам