Css 将文本顶部与同级元素背景对齐

忽略这是否真的看起来不错

我正在寻找将文本顶部与具有背景或图像的相邻块元素对齐的最佳方法。对于下面的测试用例片段，我试图[优雅地]消除的是红色缺口：

上校{ 宽度：40%； 最小高度：300px； 浮动：左； 保证金权利：4%； } .bg{ 背景：333人； } p、 h1{ 保证金：0； } 标题 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

---

h1本身与simbling元素对齐，但其内部的文本不对齐

要将文本垂直对齐为h1标记，需要设置行高

上校{ 宽度：40%； 最小高度：300px； 浮动：左； 保证金权利：4%； } .bg{ 背景：333人； } p、 h1{ 保证金：0； } .col h1{ 线高：21px； } .h1栏{ 垂直对齐：超级； } div{ 填充：0； } 标题标题标题标题标题标题标题 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

---

现在提供的另一个答案确实有效，但我真的希望避免使其工作所需的额外标记。不幸的是，这让我找到了解决办法。我不确定现在有没有一个好的解决方案，那就是纯CSS。我使用了：第一线伪选择器，但效果不佳

最后我只是在元素上使用了一个负的边距。我认为保证金的价值大致计算为：

-(({line-height} - 1 ) / 2)em

---

假设您使用的是无单位线高度值。

请阅读完整问题。我已经尝试过行距，但它不适用于多行文字，这是任何解决方案的要求。您的多行文字是什么？一个长标题。也许这是一个很长的标题，可能会被放在第二行，可能会引起行高问题。这确实有效，这就是进步。但是我对额外的加价并不感到兴奋。。。这个解决方案当时可以工作，但并不真正适用于我的CMS驱动需求。谢谢，我明白了。根据我在网上读到的内容，如果不设置文本的高度/行高，将文本垂直对齐为h1是不可能的。我想你可能不得不考虑边缘问题。