删除 div 之间的空间答案

【问题标题】：remove space between divs删除 div 之间的空间
【发布时间】：2015-11-01 02:20:47
【问题描述】：

问题：为什么两个div标签之间有空格？

截图：

//HTML

<div class='row'>
    <div class="item">
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div>
    <div class="item">
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div>
</div>

//CSS

.row{
    background-color: red; 

    margin: 2em 0;
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;
    box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;  
}
.item{
    background-color: silver;

    width: 50%;
    white-space: normal;
    display: inline-block;
}
.sub-item{
    background-color: royalblue;

    margin: .5em;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
}

【问题讨论】：

How to remove the space between inline-block elements?的可能重复
@Rob 是的，我以前见过font-size=0，但在这种情况下，它会禁用我对孩子sub-items 的边距。
那就不要那样做。这个问题一直被问到，所以搜索那些。
@Rob 我想要我的利润...
@JordanDavis 您的边距使用em，因此如果您简单地设置font-size: 0，它们也会消失。但是，您可以使用px 作为您的边距或简单地恢复内部元素中的font-size。

标签： css whitespace word-wrap removing-whitespace

【解决方案1】：

为什么两个div标签之间有空格？

您可以在Fighting the Space Between Inline Block Elements阅读更多相关信息

要删除不需要的空格，请在.row 元素中设置font-size: 0，然后在.item 中恢复font-size。

.row {
    font-size: 0;
}

.item {
    font-size: 12px;
}

由于您的边距使用em 单位，如果您简单地在包装元素中设置font-size: 0，您的边距也会消失。

要保持边距，请务必在内部元素中恢复字体大小或使用不基于字体大小的其他单位设置边距，例如 px。

以下是一个例子：

.row {
  background-color: red;
  margin: 2em 0;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;
  font-size: 0;
}
.item {
  font-size: 12px;
  background-color: silver;
  width: 50%;
  white-space: normal;
  display: inline-block;
}
.sub-item {
  background-color: royalblue;
  margin: .5em;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
}

<div class='row'>
  <div class="item">
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
  <div class="item">
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
</div>

【讨论】：

【解决方案2】：

有多种方法可以删除元素之间的空间... 一种方法是简单地将标签粘在一起，例如</div><div>

<div class='row'>
    <div class="item">
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div
    ><div class="item"> <-- an end tag stick with another open tag will solve your problem
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div>
</div>

其他解决方案的更多信息，也可以看这里CSS-Trick

【讨论】：