內聯塊：探索其空間特性
P粉360266095
2023-08-22 19:42:53
<p>內聯區塊之間有一個奇怪的間隔。我可以接受它，直到我用AJAX呼叫載入更多內容時，這個小間隔就消失了。我知道我在這裡漏了什麼。 </p>
<pre class="brush:php;toolbar:false;">div {
width: 100px;
height: auto;
border: 1px solid red;
outline: 1px solid blue;
margin: 0;
padding: 0;
display: inline-block;
}</pre>
<p>http://jsfiddle.net/AWMMT/</p>
<p>如何讓內聯塊之間的間距保持一致？ </p>
http://jsfiddle.net/AWMMT/1/
<div>...</div><div>...</div> ^ |--- 这里没有空格或换行符。你的空格是瀏覽器在顯示時轉換成「空格」的換行符。
或是你可以嘗試使用CSS進行一些小的調整：
一個flexbox會方便地忽略其子元素之間的空格，並且會類似於連續的inline-block元素進行顯示。
http://jsfiddle.net/AWMMT/470/
body { display: flex; flex-wrap: wrap; align-items: end; }空格在HTML中。有幾種可能的解決方案。從最好到最差：
float: left而不是display: inline-block，但這會對高度產生不良影響：http://jsfiddle.net/AWMMT/3 /font-size設為0，並為內部元素設定適當的font-size：http://jsfiddle.net/AWMMT/4 / - 這非常簡單，但是您無法利用內部元素上的相對字體大小規則（百分比，em）