Видалення пробілів між елементами HTML при використанні розривів рядків

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

Редагувати: Ось скріншот того, що я маю досі. Я хотів би, щоб зображення хребта книги відображалися у випадкових поєднаннях, використовуючи PHP. Ось чому мені потрібні окремі imgтеги.

Ви можете використовувати CSS. Налаштування дисплея: блокувати або поплавати: ліворуч на зображеннях ви зможете визначити свій власний інтервал та відформатувати 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 Browser на ICS 4.0.4 та IE 9. І я спокусився сказати, що це також може працювати на Safari, але я насправді не знаю ...

Ось демонстрація http://jsbin.com/acucam

Я запізнився (я просто задав запитання і знайшов тонкий у відповідному розділі), але я думаю, що відображення: 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;
}

alt текст http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdCJNNPCNNNDCNNNNTCNNNTKNNPKNNRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRZAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXL)

Тестування на 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.

Особисто мені подобається прийнята відповідь, вказуючи, що немає точного способу зробити це, не використовуючи хитрість якоїсь форми.

Для мене це дратує проблему з часом може змусити вас витрачати годину, цікаво, чому, наприклад, рядка прапорців не всі правильно вирівняні. Отже, мені довелося мати швидкий google і сам перевірити, чи було правило css що я не пам’ятав ... але здається ні :(

Що стосується наступної найкращої відповіді щодо використання розміру шрифту ... для мене це неприємний злом, який пізніше покусає вас, цікаво, чому ваш текст не відображається.

Я зазвичай розвиваю багато з PHP, і якщо я генерую сітку прапорців, вміст, створений PHP, усуває цю проблему, оскільки не вставляє пробілів / перерв.

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

Замість використання для видалення CR / LF між елементами я використовую інструкцію обробки SGML, тому що мініфієри часто видаляють коментарі, але не XML PI. Коли PHP PI обробляється PHP, він має додаткову перевагу - видалити PI повністю разом з CR / LF між ними, таким чином заощадивши щонайменше 8 байт. Ви можете використовувати будь-яку довільну назву інструкції, таку як зберегти два байти в ML (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, ви зможете стилізувати це будь-яким способом і видалити пробіли між книгами.