div内部的CSS边框

Question

好的，所以我有几个宽度相同的div，但其中一个有一个突出了模式的边框。

有没有办法让边界进入div内？我试过了

box-sizing: border-box;

这是我到目前为止所得到的

#firstDiv {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  max-width: 480;
  margin-right: 10;
  background: #eeeeee;
  border-left: 10px solid #608cc9;
  padding-top: 15;
  padding-bottom: 15;
  text-align: center;
}
#right {float: right}
.divList {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  max-width: 480;
  margin-right: 10;
  background: #fdead3;
  padding-top: 15;
  padding-bottom: 15;
  text-align: center;
}

<div id="right">
  <div id="firstDiv">
    <span>NA STANDINGS</span>
  </div>
  <div class="divList">
    <span>1</span>
  </div>
</div>

Answer 1

根据实际代码发表评论后，问题出在margin div上的.rankDisplayer。

.rankDisplayer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #eeeeee;
    border-color: #eeeeee;
    margin: 10;
}

删除你在那里的margin: 10即可 另一个选项 - 将其更改为margin: 10 0（这样您可以保留上下边距并删除左下边距）。

Answer 2

边框不能 in div，这是一个填充的东西。如果你想垂直对齐它们，我认为你可以扩展其中一个底部或缩小顶部一个。要解决此问题，请使用padding：

#firstDiv {
    ...
    width: 470px;
}

//OR

#divList {
    ...
    padding-left: 10px;
}

现在我建议你改变一下CSS。你有2个ID具有几乎相同的CSS属性，所以：为什么不为这些div创建一个类？

#firstDiv {
    width: 470px;
    background: #eeeeee;
    border-left: 10px solid #608cc9;
    padding: 15px 0;

}
.divList {
    width: 480px;
    background: #fdead3;
    padding: 15px 0 15px 10px;
}

.divs_from_right_div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-right: 10px;
    text-align: center;

}