css - 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

OP的原始问题可以通过设置s来font-size: 0解决。div

以下是基于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;——尤其是在结构元素上，比如 div——因为那个空白。