使用display：inline-block的CSS問題

Question

我設置了4個div寬度：120px放置在240px寬度的包裝紙內。

JSFiddle在這里-http: //jsfiddle.net/s7dxxro0/1/

HTML：

<div id="wrapper">  
  <div class="primary-content-block" id="about">
  </div>
  <div class="primary-content-block" id="gallery">
  </div>
  <div class="primary-content-block" id="contact">
  </div>
  <div class="primary-content-block" id="news">
  </div>
</div>

CSS：

#wrapper {
margin:0 auto;
width: 240px;
}

.primary-content-block {
display:inline-block;
vertical-align:top;
width: 120px;
height: 120px;
}

#about {
background: radial-gradient(#5cc4ba, #00aa99);
}

#gallery {
background: radial-gradient(#5cc4ba, #00aa99);
}

#contact {
background: radial-gradient(#5cc4ba, #00aa99);
}

#news {
background: radial-gradient(#5cc4ba, #00aa99);
} 

但是，由於對我的4個塊應用了少量邊距，因此元素不會彼此相鄰顯示。

這似乎是從哪里來的呢？ 如何刪除它？

當我使用float：left代替display：inline-block時，此方法有效，但由於許多原因，我不希望使用float

Answer 1

這是因為內聯塊之間存在空格。 元素之間用空格分隔（不幸的是，換行符也是如此），因此瀏覽器在它們之間放置一個空格，就好像它們是單詞一樣。

有幾種方法可以解決這個問題。

將html標記放到一邊：

<div class="primary-content-block" id="about">
</div><div class="primary-content-block" id="gallery">
</div><div class="primary-content-block" id="contact">

在div上使用負邊距：

.primary-content-block {
    margin-right: -4px;
}

將字體大小設置為0：

#wrapper {
    font-size: 0;
}
#wrapper > div {
    font-size: 12px /* or whatever it was before */
}

或者，如果是<p>元素（不幸的是不是divs），則省略結束標記：

<p class="primary-content-block" id="about">
<p class="primary-content-block" id="gallery">

資料來源： css-tricks

Answer 2

問題是由我的div之間的換行引起的

解決方法是：

<div id="wrapper">  
  <div class="primary-content-block" id="about"></div><div class="primary-content-block" id="gallery"></div><div class="primary-content-block" id="contact"></div><div class="primary-content-block" id="news"></div>
</div>

Answer 3

您可以簡單地添加浮點數：離開div

.primary-content-block {
    /* display:inline-block; */
    vertical-align:top;
    width: 120px;
    height: 120px;
    float: left;
}

像這樣http://jsfiddle.net/s7dxxro0/10/

Answer 4

這不是一個“ bug”（我不認為）。 這就是設置行上元素的方式，這些塊之間的空格就像單詞之間的空格一樣。 您可以以4px的負空白將元素放回原處（可能需要根據父字體大小進行調整）

.primary-content-block {
   display:inline-block;
   vertical-align:top;
   width: 120px;
   height: 120px;
}