Blok sebaris: meneroka sifat spatialnya

Question

Terdapat jurang pelik antara blok sebaris. Saya boleh hidup dengannya sehingga saya memuatkan lebih banyak kandungan dengan panggilan AJAX dan jurang kecil ini hilang. Saya tahu saya kehilangan sesuatu di sini.

div {
    lebar: 100px;
    ketinggian: auto;
    sempadan: 1px merah pepejal;
    garis besar: 1px biru pepejal;
    margin: 0;
    padding: 0;
    paparan: inline-block;
}

http://jsfiddle.net/AWMT/

Bagaimana untuk menjadikan jarak konsisten antara blok sebaris?

Answer 1

http://jsfiddle.net/AWMT/1/

<div>...</div><div>...</div>
              ^
              |--- 这里没有空格或换行符。

Ruang anda ialah pemisah baris yang ditukarkan oleh penyemak imbas kepada "ruang" apabila dipaparkan.

Atau anda boleh cuba membuat beberapa pelarasan kecil menggunakan CSS:

Kotak fleksibel akan mengabaikan ruang antara elemen anaknya dengan mudah dan akan dipaparkan seperti elemen blok sebaris berterusan.

http://jsfiddle.net/AWMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

Answer 2

Ruang ada dalam HTML. Terdapat beberapa penyelesaian yang mungkin. Daripada yang terbaik kepada yang paling teruk:

1. Alih keluar ruang kosong sebenar dalam HTML (sebaik-baiknya pelayan boleh melakukan ini untuk anda semasa menyampaikan fail, atau sekurang-kurangnya templat input anda boleh menambah ruang putih dengan sewajarnya) http://jsfiddle.net/AWMT/2/
2. Gunakan float: left而不是display: inline-block, tetapi ini akan memberi kesan buruk pada ketinggian: http://jsfiddle.net/AWMMT/3/
3. Letakkan bekas font-size设置为0，并为内部元素设置适当的font-size: http://jsfiddle.net/AWMT/4/ - Ini sangat mudah, tetapi anda tidak boleh mengambil kesempatan daripada peraturan saiz fon relatif (peratusan, em) pada elemen dalaman