如何让父div左侧边框高度与内部文本高度完全一致？

针对多文本块下左侧边框无法贴合文本高度的问题，这里提供几个实用方案：

方案一：将容器设为inline-block #

通过把父容器设置为inline-block，让它的高度紧密包裹内部文本内容，边框高度自然就和文本高度一致：

#box {
  width: 500px;
  padding-left: 2rem;
  border-color: #01B288;
  border-style: solid;
  border-width: 0 0 0 3px;
  display: inline-block; /* 核心修改 */
  vertical-align: top; /* 避免底部对齐问题 */
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

HTML无需修改，保持原结构即可。

方案二：用伪元素模拟边框（更灵活） #

如果需要更精准的控制，可以用伪元素替代原生边框，配合内部文本容器的inline-block属性实现完全贴合：

修改后的HTML： #

<div id="box">
  <div class="text-content">
    <h1>BIGGER FONT EXAMPLE</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
  </div>
</div>

对应的CSS： #

#box {
  width: 500px;
  padding-left: 2rem;
  position: relative;
}

.text-content {
  display: inline-block; /* 让容器高度贴合文本 */
}

#box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #01B288; /* 替代边框颜色 */
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

方案三：Flex布局实现 #

利用Flex布局的特性，让父容器高度由内容决定，原生边框自然贴合文本：

#box {
  width: 500px;
  padding-left: 2rem;
  border-left: 3px solid #01B288;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 确保文本左对齐 */
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

这三个方案都能解决多文本块下边框高度不匹配的问题，你可以根据实际场景选择最合适的。

内容的提问来源于stack exchange，提问作者Mr. Fontastic