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的边框拉伸.parent的整个高度，但是使用上面的代码会在顶部留下一个刺激的间隙（尽管它会到达底部）。我尝试通过设置负边距并将行高设置为0来修复它，但它弄乱了.child内的文本。有没有正确的方法来解决这个问题？

Answer 1

您需要移除top: 7px，因为它会将子7px相对于父级放置。

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 2

*{
  margin:0px;
  padding:0px;
  border:0px;
}
.parent {
  height: 40px;
  width: 100%;
  background-color: #383838;
  box-shadow: 0px 1px 5px #767676;
  overflow: hidden;
  padding:0px;
}
.child {
  border-left: solid white 1px;
  height: 100%;
  padding: 0px 10px 10px 10px;
  
  
}

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

你必须规范化CSS然后一切都会正常工作。

div的边界不会达到100％高度的父div顶部

2 个答案: