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;
}

Answer 2

我认为这是hr的余量。添加margin-top: 0：

＆＃13;

#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;
    margin-top: 0;
    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
}

＆＃13;

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

＆＃13;

Answer 3

我看到的唯一问题是padding-right。

尝试将padding-right从15px更改为5px，看看是否有任何改变。

编辑：看到你的评论。见下文。

它可能起源于

.sidebar-element h4 {
    padding-top: 10px;
}

你的样式表的一部分。

保证金突然冒出来

3 个答案: