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