Question

假设一个人正在设计一个框以容纳某些内容，并且希望该框在其边框和其中的文本之间始终具有一致的空间，而与文本的行高无关。除了custom negative margin on each box以外，还有解决方案吗？

从理论上讲，这实际上应该是内容的“责任”（在本例中为文本），假设我们的盒子是某种允许包含的组件（例如Web组件插槽），那么我将特别感兴趣设置内联元素样式的任何方法，以使它的行高生成的顶部和底部空间折叠，而与行高值无关（有意不将其称为边距，以使其与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

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

1 个答案: