Usuwanie spacji między elementami HTML podczas używania znaków końca wiersza

Mam stronę z wierszem o długości około 10 imgs. Aby zapewnić czytelność kodu HTML, chcę wstawić znak podziału wiersza między każdym imgznacznikiem, ale w ten sposób między obrazami renderowane są spacje, czego nie chcę. Czy jest coś, co mogę zrobić poza złamaniem środka tagów, a nie między nimi?

Edycja: Oto zrzut ekranu tego, co mam do tej pory. Chciałbym, aby obrazy grzbietów książki były wyświetlane w przypadkowych kombinacjach przy użyciu PHP. Dlatego potrzebuję oddzielnych imgtagów.

Możesz użyć CSS. Ustawienie display: block lub float: pozostawione na obrazach pozwoli ci zdefiniować własne odstępy i sformatować HTML, jak chcesz, ale wpłynie na układ w sposób, który może być odpowiedni lub nie.

W przeciwnym razie masz do czynienia z zawartością wbudowaną, więc formatowanie HTML jest ważne - ponieważ obrazy będą skutecznie działać jak słowa.

Przepraszam, jeśli to jest stare, ale właśnie znalazłem rozwiązanie.

Spróbuj ustawić font-size na 0. W ten sposób białe przestrzenie między obrazami będą miały szerokość 0 i nie wpłynie to na obrazy.

Nie wiem, czy to działa we wszystkich przeglądarkach, ale wypróbowałem to z Chromium i niektórymi <li>elementami z display: inline-block;.

Możesz użyć komentarzy.

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

Martwiłbym się jednak semantyką posiadania serii obrazów obok siebie.

Masz dwie opcje bez robienia przybliżonych rzeczy z CSS. Pierwszą opcją jest użycie javascript do usunięcia elementów podrzędnych zawierających tylko białe znaki z tagów. Jednak przyjemniejszą opcją jest użycie faktu, że białe znaki mogą istnieć wewnątrz tagów bez znaczenia. Tak jak to:

<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 może łatwo naprawić ten stary problem:

.image-wrapper {
  display: flex;
}

Więcej informacji o flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Po zbyt wielu badaniach, próbach i błędach znalazłem sposób, który wydaje się działać dobrze i nie wymaga ręcznego ponownego ustawiania rozmiaru czcionki w elementach potomnych, co pozwala mi mieć ustandaryzowany rozmiar czcionki em w całym dokumencie .

W przeglądarce Firefox jest to dość proste, wystarczy ustawić word-spacing: -1emelement nadrzędny. Z jakiegoś powodu Chrome ignoruje to (i o ile testowałem, ignoruje odstępy między wyrazami niezależnie od wartości). Więc oprócz tego dodaję letter-spacing: -.31emrodzicom i letter-spacing: normaldzieciom. Ten ułamek em jest wielkością przestrzeni TYLKO JEŻELI twój rozmiar em jest znormalizowany . Firefox z kolei ignoruje ujemne wartości odstępów między literami, więc nie doda ich do odstępów między wyrazami.

Testowałem to na Firefoksie 13 (win / ubuntu, 14 na Androidzie), Google Chrome 20 (win / ubuntu), przeglądarce Android na ICS 4.0.4 i IE 9. I mam ochotę powiedzieć, że to też może działać na Safari, ale tak naprawdę nie wiem ...

Oto demo http://jsbin.com/acucam

Jestem za późno (właśnie zadałem pytanie i znalazłem cienkie w powiązanej sekcji), ale myślę, że wyświetlacz: table-cell; to lepsze rozwiązanie

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

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

jedynym problemem jest to, że nie będzie działać w IE 7 i wcześniejszych wersjach, ale można to naprawić przez hack

Użyj arkusza stylów CSS do rozwiązania tego problemu, tak jak w poniższym kodzie.

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

tekst alternatywny http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdCRJd2y08

Testowanie na Firefox 3.5 Final!

PS. Twój html powinien wyglądać tak.

<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>

Czy jest coś, co mogę zrobić poza złamaniem środka tagów, a nie między nimi?

Nie całkiem. Ponieważ <img>s są elementami wbudowanymi, spacje między tymi elementami są traktowane przez mechanizm renderujący HTML jako prawdziwe spacje w tekście - zbędne spacje (i podziały wierszy) zostaną obcięte, ale pojedyncze spacje zostaną wstawione do danych znakowych elementu tekstowego.

Pozycjonowanie <img>tagów absolutnie może temu zapobiec, ale odradzałbym to, ponieważ oznaczałoby to ręczne pozycjonowanie każdego z obrazów do jakiejś miary pikseli, co może wymagać dużo pracy.

Innym rozwiązaniem byłoby zastosowanie niekonwencjonalnych podziałów linii w miejscach przestrzeni. Jest to podobne do pierwszych odpowiedzi i stanowi alternatywny sposób zestawiania elementów. Jest to również technika optymalizacji super-edge, ponieważ zastępuje spacje w znacznikach powrotami karetki.

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

Zauważ, że w żadnym z tych kodów nie ma spacji. Miejsca, w których spacje są zwykle używane w HTML, są zastępowane powrotem karetki. Jest mniej rozwlekły niż używanie komentarzy i używanie białych znaków, jak zaleca Paul de Vrieze.

Podziękowania dla tech.co za to podejście.

białe znaki: inicjał; Pracuje dla mnie.

Białe spacje między elementami są umieszczane tam przez edytor HTML tylko w celu wizualnego formatowania. Możesz użyć jQuery, aby usunąć białe znaki:

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

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

});

Spowoduje to odłączenie elementów podrzędnych, wyczyści wszelkie białe znaki, które pozostały, przed ponownym dodaniem elementów podrzędnych.

W przeciwieństwie do innych odpowiedzi na to pytanie, użycie tej metody zapewnia zachowanie odziedziczonego css displayi font-sizewartości. Nie ma również potrzeby używania floati uciążliwości, clearktóra jest wtedy wymagana. Oczywiście będziesz musiał używać jQuery.

Osobiście podoba mi się zaakceptowana odpowiedź, stwierdzająca, że ​​nie ma dokładnego sposobu, aby to zrobić, nie bez użycia jakiejś sztuczki.

Dla mnie jest to irytujący problem, który czasami może sprawić, że stracisz godzinę na zastanawianie się, dlaczego na przykład rząd pól wyboru nie jest poprawnie wyrównany .. Dlatego musiałem mieć szybkie google i sam sprawdzić, czy istnieje reguła css że nie pamiętam ... ale wydaje się, że nie :(

Jeśli chodzi o następną najlepszą odpowiedź, użycie rozmiaru czcionki ... dla mnie jest to paskudny hack, który ugryzie cię później, gdy będziesz się zastanawiać, dlaczego twój tekst się nie wyświetla.

Generalnie dużo rozwijam w PHP iw przypadku, gdy generuję siatkę pól wyboru, treść wygenerowana przez PHP usuwa ten problem, ponieważ nie wstawia żadnych odstępów / przerw.

Po prostu sugerowałbym albo zajmowanie się obrazami znajdującymi się razem w jednym wierszu, albo używanie skryptu po stronie serwera do generowania treści / obrazów.

Zamiast używać do usuwania CR / LF między elementami, używam instrukcji przetwarzania SGML, ponieważ minifier często usuwają komentarze, ale nie XML PI. Gdy PHP PI jest przetwarzane przez PHP, ma dodatkową zaletę polegającą na całkowitym usunięciu PI wraz z CR / LF pomiędzy, oszczędzając w ten sposób co najmniej 8 bajtów. Możesz użyć dowolnej dowolnej prawidłowej nazwy instrukcji, takiej jak i zapisać dwa bajty w X (HT) ML.

Zainspirowany odpowiedzią Quentina , możesz również umieścić zamykający znak> obok początku następnego tagu.

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

Mówiąc semantycznie, czy nie byłoby najlepiej użyć uporządkowanej lub nieuporządkowanej listy, a następnie odpowiednio ją stylizować za pomocą 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>

Korzystając z CSS, możesz stylizować to w dowolny sposób i usuwać spacje między książkami.