时间戳

首页 > 解决方案 > css 可以用来折叠行高不同的内联元素周围的空白吗？

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

问题描述

假设一个人正在设计一个框来框住某些内容，并希望该框在其边框和其中的文本之间始终具有一致的空间，而不管文本的行高如何。除了每个盒子上的自定义负边距之外，还有其他解决方案吗？

理论上，这实际上应该是内容的“责任”（在这种情况下是文本），假设我们的盒子是某种允许嵌入的组件（例如 Web 组件插槽），所以我会对任何方式特别感兴趣为内联元素设置样式，使其行高生成的顶部和底部空间折叠，而不管行高值如何（故意不将它们称为边距以免将它们与margincss 属性混淆）。

这里作为问题的一个可运行示例 - 洋红色边框和内部文本之间的空间因行高而异，如果洋红色边框不存在，则每个框似乎都有不同的填充。

这可能已经得到解答，但不幸的是，由于这些术语太笼统，很难研究（尽管我确实尝试过）。

.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>

标签： htmlcss

解决方案

可以解决一半问题的一个想法是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

推荐阅读