Menghapus spasi antara elemen HTML saat menggunakan jeda baris

Saya memiliki halaman dengan baris sekitar 10 imgs. Untuk keterbacaan HTML, saya ingin menempatkan pemutusan baris di antara setiap imgtag, tetapi melakukannya membuat spasi kosong di antara gambar, yang tidak saya inginkan. Apakah ada yang bisa saya lakukan selain istirahat di tengah tag daripada di antara mereka?

Sunting: Berikut adalah tangkapan layar dari apa yang saya miliki sejauh ini. Saya ingin gambar tulang belakang buku ditampilkan dalam kombinasi acak, menggunakan PHP. Inilah mengapa saya membutuhkan imgtag terpisah .

Anda bisa menggunakan CSS. Menyetel display: block, atau float: left pada gambar akan memungkinkan Anda menentukan spasi Anda sendiri dan memformat HTML sesuka Anda, tetapi akan memengaruhi tata letak dengan cara yang mungkin sesuai atau mungkin tidak sesuai.

Jika tidak, Anda berurusan dengan konten sebaris sehingga pemformatan HTML itu penting - karena gambar akan bertindak secara efektif seperti kata-kata.

Maaf jika ini sudah lama tetapi saya baru menemukan solusinya.

Coba atur font-sizeke 0. Dengan demikian, ruang putih di antara gambar akan menjadi 0 lebarnya, dan gambar tidak akan terpengaruh.

Tidak tahu apakah ini berfungsi di semua browser, tetapi saya mencobanya dengan Chromium dan beberapa <li>elemen dengan display: inline-block;.

Anda bisa menggunakan komentar.

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

Saya khawatir tentang semantik memiliki serangkaian gambar berdampingan.

Anda memiliki dua opsi tanpa melakukan perkiraan hal-hal dengan CSS. Opsi pertama adalah menggunakan javascript untuk menghapus turunan whitespace-only dari tag. Pilihan yang lebih bagus adalah dengan menggunakan fakta bahwa spasi dapat berada di dalam tag tanpa arti. Seperti:

<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 dapat dengan mudah memperbaiki masalah lama ini:

.image-wrapper {
  display: flex;
}

Informasi lebih lanjut tentang flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Setelah terlalu banyak penelitian, coba-coba, saya menemukan cara yang tampaknya berfungsi dengan baik dan tidak perlu mengatur ulang ukuran font secara manual pada elemen anak-anak, memungkinkan saya untuk memiliki ukuran font em standar di seluruh dokumen .

Di Firefox ini cukup sederhana, cukup atur word-spacing: -1empada elemen induk. Untuk beberapa alasan, Chrome mengabaikan ini (dan sejauh yang saya uji, itu mengabaikan spasi kata terlepas dari nilainya). Jadi selain ini saya menambahkan letter-spacing: -.31emkepada orang tua dan letter-spacing: normalanak-anak. Bagian dari em ini adalah ukuran spasi HANYA JIKA ukuran em Anda distandarisasi . Firefox, pada gilirannya, mengabaikan nilai negatif untuk spasi huruf, sehingga tidak akan menambahkannya ke spasi kata.

Saya menguji ini di Firefox 13 (win / ubuntu, 14 di android), Google Chrome 20 (win / ubuntu), Browser Android di ICS 4.0.4 dan IE 9. Dan saya tergoda untuk mengatakan ini juga dapat berfungsi di Safari, tapi aku tidak begitu tahu ...

Berikut demo http://jsbin.com/acucam

Saya terlambat (saya baru saja mengajukan pertanyaan dan menemukan kekurangan di bagian terkait) tetapi saya pikir display: table-cell; adalah solusi yang lebih baik

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

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

satu-satunya masalah adalah itu tidak akan berfungsi pada IE 7 dan versi sebelumnya tetapi itu dapat diperbaiki dengan hack

Gunakan lembar gaya CSS untuk menyelesaikan masalah ini seperti kode berikut.

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

teks alt http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7noPL3tdRJd2y08/

Pengujian di Firefox 3.5 Final!

PS. html Anda harus seperti ini.

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

Apakah ada yang bisa saya lakukan selain istirahat di tengah tag daripada di antara mereka?

Tidak juga. Karena <img>s adalah elemen sebaris, spasi di antara elemen ini dianggap oleh perender HTML sebagai spasi sebenarnya dalam teks - spasi yang berlebihan (dan jeda baris) akan dipotong tetapi spasi tunggal akan disisipkan ke dalam data karakter elemen teks.

Memposisikan <img>tag benar-benar dapat mencegah hal ini tetapi saya menyarankan untuk tidak melakukannya karena ini berarti memposisikan setiap gambar secara manual ke beberapa ukuran piksel yang bisa menjadi pekerjaan yang berat.

Solusi lain adalah menggunakan jeda baris yang tidak konvensional di tempat-tempat ruang. Ini mirip dengan jawaban pasangan pertama, dan merupakan cara alternatif untuk menyusun elemen. Ini juga merupakan teknik pengoptimalan tepi super karena menggantikan spasi di markup Anda dengan carriage return.

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

Perhatikan bahwa tidak ada spasi di salah satu kode itu. Tempat-tempat di mana spasi biasanya digunakan dalam HTML diganti dengan carriage return. Ini kurang bertele-tele daripada menggunakan komentar dan menggunakan spasi seperti yang direkomendasikan oleh Paul de Vrieze.

Penghargaan untuk tech.co untuk pendekatan ini.

spasi: awal; Bekerja untuk saya.

Spasi putih antara elemen hanya diletakkan di sana oleh editor HTML untuk tujuan pemformatan visual. Anda dapat menggunakan jQuery untuk menghapus spasi:

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

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

});

Ini melepaskan elemen anak, membersihkan spasi kosong yang tersisa sebelum menambahkan kembali elemen anak.

Berbeda dengan jawaban lain untuk pertanyaan ini, menggunakan metode ini memastikan bahwa css displaydan font-sizenilai yang diwarisi dipertahankan. Ada juga tidak perlu menggunakan floatdan rumit clearyang kemudian diperlukan. Tentu saja, Anda harus menggunakan jQuery.

Secara pribadi saya menyukai jawaban yang diterima yang menyatakan tidak ada cara pasti untuk melakukan ini, tidak dengan menggunakan trik dari beberapa bentuk.

Bagi saya, ini adalah masalah yang menjengkelkan dengan kadang-kadang dapat membuat Anda membuang waktu satu jam bertanya-tanya mengapa deretan kotak centang misalnya tidak semuanya disejajarkan dengan benar .. Oleh karena itu saya harus cepat google dan saya sendiri memeriksa apakah ada aturan css yang belum saya ingat ... tapi sepertinya tidak :(

Adapun jawaban terbaik berikutnya, menggunakan ukuran font ... bagi saya ini adalah peretasan jahat yang akan menggigit Anda nanti bertanya-tanya mengapa teks Anda tidak muncul.

Saya biasanya mengembangkan banyak hal dengan PHP dan dalam kasus di mana saya membuat kotak centang, konten yang dihasilkan PHP menghilangkan masalah ini karena tidak menyisipkan spasi / jeda.

Sederhananya, saya akan menyarankan baik harus berurusan dengan semua gambar dalam satu baris bersama-sama atau menggunakan skrip sisi server untuk menghasilkan konten / gambar.

Alih-alih menggunakan untuk menghapus CR / LF antar elemen, saya menggunakan instruksi pemrosesan SGML karena minifier sering menghapus komentar, tetapi bukan XML PI. Ketika PI PHP diproses oleh PHP, ia memiliki manfaat tambahan untuk menghapus PI sepenuhnya bersama dengan CR / LF di antaranya, sehingga menghemat setidaknya 8 byte. Anda dapat menggunakan nama instruksi valid sembarang seperti dan menyimpan dua byte dalam X (HT) ML.

Terinspirasi oleh jawaban Quentin , Anda juga dapat menempatkan penutup> di sebelah awal tag berikutnya.

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

Berbicara secara semantik, bukankah lebih baik menggunakan daftar berurutan atau tidak berurutan lalu menatanya dengan tepat menggunakan 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>

Dengan menggunakan CSS, Anda dapat menata gaya ini dengan cara apa pun yang Anda inginkan dan menghapus spasi putih di antara buku-buku tersebut.