Удаление пробелов между элементами 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.