Question

我已经设置了4个div全部宽度：120px放在240px宽的包装内。

JSFiddle here - 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但是我宁愿不使用浮动因为很多原因

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>个元素（不幸的话不是div），请忽略结束标记：

<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

这不是一个＆＃34;错误＆＃34; （我不这么认为）。它只是在一条线上设置元素的方式。这些块之间的空间就像单词之间的空格。您可以使用负4px的边距将元素移回原位（可能需要根据父级的字体大小进行调整）

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

使用display的CSS问题：inline-block

4 个答案: