Question

问题：为什么两个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;
}

Answer 1

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

您可以在Fighting the Space Between Inline Block Elements

中详细了解相关信息

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

.item

由于您的边距使用.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;
}

Answer 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

删除div之间的空格

2 个答案: