使用 display:inline-block 的 CSS 问题答案

【问题标题】：CSS issue with using display:inline-block使用 display:inline-block 的 CSS 问题
【发布时间】：2014-09-12 18:05:22
【问题描述】：

我设置了 4 个宽度为 120px 的 div，放置在 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 时有效，但出于多种原因我不希望使用浮动

【问题讨论】：

添加浮动：左；如果容器不够宽，则增加容器的宽度
您的代码正在运行检查这里http://jsfiddle.net/s7dxxro0/4/
您可以尝试this，因为换行符会在您的框之间添加空间。
@dcc 不要添加它。使用float: left 或使用display: inline-block。现在，您对于同一问题有两种解决方案（并排显示它们）。还要注意float: left 会引入其他问题，特别是如果块的高度略有不同。所以不，虽然一开始看起来是这样，float: left 并不是解决这个问题的正确方法。
再一次，我推荐阅读css-tricks.com/fighting-the-space-between-inline-block-elements

标签： html css

【解决方案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

【讨论】：

我认为负边距是一个不好的解决方案，因为你不知道空间正好是 4px。其他的解决方案都很好，它们都可以工作。
@GolezTrol - 您通常在上下文中知道您确实需要多少负边距。它并不总是 4px，但在 px 或 em 中无法选择正确的负边距是一种罕见的情况。
我同意 Golez，这不是一个完美的解决方案，但我想要完整。我也不喜欢 font-size 方法，因为它破坏了em 继承。
@isogram 您可能需要查看rem。

【解决方案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>

【讨论】：

【解决方案3】：

你可以简单的添加 float: left the div

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

喜欢这个http://jsfiddle.net/s7dxxro0/10/

【讨论】：

【解决方案4】：

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

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

【讨论】：