CSS div之间的水平差距

Question

正如您所看到的，第一个（黄色轮廓）div和第二个（红色轮廓）div之间存在差距。我已经尝试了几件事但到目前为止没有任何作用。

#borderLeft{

    background: url(../01_templates/borderLeft.png) left no-repeat;
    display:inline;
    position relative;
    left:50px;
    float:left;
    width:133px;
    border:1px dotted yellow;

}

#border{

    background: url(../01_templates/borderCenter.png) left repeat-x;
    display:inline;
    position:inherit;
    width:100%;
    border:1px dotted red;
    margin-right:116px;

}

#borderRight{

    background: url(../01_templates/borderRight.png) left no-repeat;
    display:inline;
    float:right;
    position:absolute;
    right:0px;
    border:1px dotted yellow;
    width:133px;

}


<div id="borderLeft"></div>
<div id="border"></div>
<div id="borderRight"></div>

Answer 1

可以通过在font-size: 0上设置div来修复OP的原始问题。

以下是基于flexbox的现代方法。

.parent {
  display: flex;
}

.parent div {
  border: 1px solid black;
  width: 25%;
}

.parent .double {
  border-color: red;
  flex-grow: 2;
}

<div class="parent">
  <div></div>
  <div class="double"></div>
  <div></div>
</div>

Answer 2

可能是由display: inline;属性引起的。内联元素始终显示为空格，且不属于padding或margin。

如果这是导致它的原因，这里有一些解决方案。您可以删除代码中元素之间的任何空格，如下所示：

<div id="borderLeft"></div><div id="border"></div><div id="borderRight"></div>

或者你可以漂浮它们。

div { float: left; }

可能还有其他解决方案，但通常我会发现自己避免display: inline; - 特别是在结构元素上，比如divs - 因为那个空格。