內聯塊：探索其空間特性

Question

內聯區塊之間有一個奇怪的間隔。我可以接受它，直到我用AJAX呼叫載入更多內容時，這個小間隔就消失了。我知道我在這裡漏了什麼。

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0;
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

如何讓內聯塊之間的間距保持一致？

Answer 1

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

Answer 2

空格在HTML中。有幾種可能的解決方案。從最好到最差：

1. 在HTML中刪除實際的空格（理想情況下，伺服器在提供文件時可以為您執行此操作，或者至少您的輸入模板可以適當地添加空格）http://jsfiddle.net/ AWMMT/2/
2. 使用float: left而不是display: inline-block，但這會對高度產生不良影響：http://jsfiddle.net/AWMMT/3 /
3. 將容器的font-size設為0，並為內部元素設定適當的font-size：http://jsfiddle.net/AWMMT/4 / - 這非常簡單，但是您無法利用內部元素上的相對字體大小規則（百分比，em）