html - div 的边框未达到父 div 的 100% 高度顶部

Question

我有这个CSS代码:

.parent {
height: 40px;
width: 100%;
background-color: #383838;
box-shadow: 0px 1px 5px #767676;
overflow: hidden;
position: relative;
box-sizing: border-box;
}

.child {        
display: inline-block;
border-left: solid white 1px;
position: absolute;
height: 100%;
padding: 0px 10px 10px 10px;
right: 0px;
top: 7px;
}

我想让 .child 的边框拉伸(stretch) .parent 的整个高度，但是上面的代码在顶部留下了一个令人讨厌的空隙(它虽然确实到达了底部)。我试图通过设置负边距并将行高设置为 0 来修复它，但它弄乱了 .child 中的文本。有没有正确的方法来解决这个问题？

Answer 1

您需要删除 top: 7px，因为它会将子项相对于父项向下放置 7px。

.parent {
  height: 40px;
  width: 100%;
  background-color: #383838;
  box-shadow: 0 1px 5px #767676;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.child {
  display: inline-block;
  border-left: 1px white solid;
  position: absolute;
  height: 100%;
  padding: 0 10px 10px 10px;
  right: 0;
  /* top: 7px; Remove this */
}

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