html - 如何创建与父div 相同的子div 的边框高度？

Question

我有一个带有一些填充的子 div。但是当我在子 div 上应用 border-right 时，我怎样才能得到它的全高呢？这是代码:

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

.parent{
  border: 2px solid black;
}
.child{
  width: 25%;
  border-right: 2px solid red;
}

我当前代码的输出:

我真正想要的是:

我是新手，这将是一个很大的帮助。谢谢

Answer 1

删除默认 margin的 <h1>元素，然后使用 padding你可以对齐 text以父 div 为中心并设置 height:100%到子 div，如下所示，

.parent{
  border: 2px solid black;
  height:40px;
}
.child{
  width: 25%;
  height:100%;
  border-right: 2px solid red;
}
h2{
  margin:0;
  padding-top:8px;
}

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