保证金突然冒出来

Question

在构建页面时,我遇到了一个无法解释的问题:

侧边栏中的第一个div有一个奇怪的突破

第二张图片,显示侧边栏中的顶部div(模板边栏付款)实际上并没有包含该差距.

我有一个边缘出现,没有任何地方设置(我搜索广泛和广泛).

#template-sidebar {
  display: table-cell;
  width: 200px;
  padding-right: 15px;
  height: 626px;
  background: #FFF;
  border-right: 7px solid #fec30d;
}
.sidebar-element {
  height: 200px;
  border-top: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
  border: none;
  height: 1px;
  color: #c6c6c6;
  background-color: #c6c6c6;
  /*border: 0.5px solid #c6c6c6;*/
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
  padding-top: 10px;
}
#template-sidebar-payment {
  border-top: 0;
  !important
}
#template-sidebar-rules {
  border-bottom: 0;
  !important
}

<div id="template-sidebar">
  <div id="template-sidebar-payment" class="sidebar-element">
    <hr noshade/>
    <h4>Sposoby p?atno?ci</h4>
  </div>
  <div id="template-sidebar-delivery" class="sidebar-element">
    <hr noshade/>
    <h4>Sposoby dostawy</h4>
  </div>
  <div id="template-sidebar-rules" class="sidebar-element">
    <hr noshade/>
    <h4>Regulamin</h4>
  </div>
</div>

请注意,将其作为表格单元格的原因是因为我希望侧边栏在(长度)扩展时沿着(右侧)内容缩放.

至于现在,我尝试删除某些东西,添加显示:块等但没有任何帮助.

如果需要更多的代码(我想可能有一个问题可能在其他地方？)请在评论中提出,我很乐意提供.

Answer 1

我们需要现场演示来检查这种情况.但我认为将垂直对齐设置为侧边栏可以解决您的问题.

#template-sidebar {
    vertical-align:top;
}