html - 可以使用 css 折叠具有不同行高的内联元素周围的空白吗？

Question

假设有人正在设计一个框来框住一些内容，并希望该框的边框和其中的文本之间始终保持一致的空间，而不管文本的行高如何。除了 custom negative margin on each box 之外还有其他解决方案吗？ ？

从理论上讲，这实际上应该是内容(在本例中为文本)的“责任”，假设我们的盒子是某种允许嵌入的组件(例如 Web 组件插槽)，所以我会对以任何方式设置内联元素的样式，使其由 line-height 生成的顶部和底部空间折叠，而不管 line-height 值如何(故意不称它们为边距，以免将它们与 margin css 属性混淆) .

此处作为问题的可运行示例 - 洋红色边框和内部文本之间的空间因行高而异，如果没有洋红色边框，则看起来每个框都有不同的填充。

这可能已经得到解答，但不幸的是，由于这些术语过于笼统，因此很难研究(尽管我尝试过)。

.foo {
  max-width: 200px;
  border: 2px solid blue;
  padding: 20px;
  line-height: 2;
  display: inline-block;
  vertical-align: top;
}

.foo>* {
  border: 1px solid magenta;
}

.baz {
  line-height: 1;
}

.bar {
  line-height: 3;
}

<div class="foo">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
<div class="foo">
  <div class="baz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
<div class="foo">
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>

Answer 1

一个可能解决一半问题的想法是将文本的 line-height 更改为小于容器的值。这样做，文本的高度将小于行框，您可以将其对齐到顶部。为此，您需要考虑一个额外的容器。

.foo {
  max-width: 200px;
  border: 2px solid blue;
  padding: 20px;
  line-height: 2;
  display: inline-block;
  vertical-align: top;
}

.foo>* {
  border: 1px solid magenta;
}

.baz {
  line-height: 1;
}

.bar {
  line-height: 3;
}

span {
  line-height:1;
  vertical-align:top;
}

<div class="foo">
  <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
<div class="foo">
  <div class="baz"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
<div class="foo">
  <div class="bar"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>

如您所见，无论 line-height 是什么，文本始终会在顶部对齐，但问题仍然存在于底部。就好像我们只把问题转移到了一边。

这是一个相关的答案，可以更好地理解对齐技巧:https://stackoverflow.com/a/54190413/8620333