如何确保空跨度匹配兄弟的高度

Question

On codepen I'm testing some frame classes在span button input和一个空的span。为了确保空span匹配其他人的高度我正在使用calc数学给它min-height但这个计算似乎需要知道line-height。有没有办法确保min-height而不需要知道line-height？另外我不明白为什么vertical-align middle将空的与其他人对齐，而baseline则没有。如果有人能够解释或建议那些令人敬畏的替代方案

.frame-apply {
  --sum-border: calc(2 * var(--frame-border-width, 0));
  --sum-padding-y: calc(2 * var(--frame-padding-y));

  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: var(--frame-border-width, 0);
  display: inline-block;

  /* Using middle aligns the empty one with the others
     I don't understand why it doesn't align correctly as baseline */
  vertical-align: middle;

  /* min-height only seems necssary to fill the empty one
     It'd be better to avoid needing to know line-height */
  min-height: calc(
    var(--sum-padding-y) +
    var(--sum-border) + 
    1em * var(--test-line)
  );

  min-width: 0;
  padding:
    var(--frame-padding-y)
    var(--frame-padding-x);  
}

.frame-dense {
  --frame-padding-y: 3px;
  --frame-padding-x: 11px;
  --frame-border-width: 1px;
}

.frame-basic {
  --frame-padding-y: 7px;
  --frame-padding-x: 15px;
  --frame-border-width: 1px;
}

.frame-plush {
  --frame-padding-y: 11px;
  --frame-padding-x: 23px;
  --frame-border-width: 1px;
}

/* Test values ideally all scale */
:root {
  --test-size calc(1rem * 14px / 16px);
  --test-line: 1.5;
}

.font-test {
  font-size: var(--test-size);
  line-height: var(--test-line); 
}

Answer 1

解决所有问题（最小高度和对齐）的最简单方法是依靠flexbox，默认情况下所有元素都会拉伸以填充其行的高度：

figure {
  display:flex;
  flex-wrap:wrap;
}
figcaption {
  width:100%;
}

figure > * {
 margin-right:4px!important; /*to replace the default whitespace*/
}

<link rel="stylesheet" href="https://unpkg.com/@plangrid/[email protected]/main.css">
<link rel="stylesheet" href="https://unpkg.com/@plangrid/[email protected]/root.css">
<link rel="stylesheet" href="https://unpkg.com/@plangrid/[email protected]/blending.css">

<link rel="stylesheet" href="https://unpkg.com/@plangrid/[email protected]/live.css">
<style>
/*
Preset classes in HTML are from
https://unpkg.com/@plangrid/[email protected]/main.css
https://stackoverflow.com/q/48469414/770127
*/

.frame-apply {
  --sum-border: calc(2 * var(--frame-border-width, 0));
  --sum-padding-y: calc(2 * var(--frame-padding-y));
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: var(--frame-border-width, 0);
  min-width: 0;
  padding:
    var(--frame-padding-y)
    var(--frame-padding-x);  
}

.frame-dense {
  --frame-padding-y: 3px;
  --frame-padding-x: 11px;
  --frame-border-width: 1px;
}

.frame-basic {
  --frame-padding-y: 7px;
  --frame-padding-x: 15px;
  --frame-border-width: 1px;
}

.frame-plush {
  --frame-padding-y: 11px;
  --frame-padding-x: 23px;
  --frame-border-width: 1px;
}

/* Test values ideally all scale */
:root {
  --test-size calc(1rem * 14px / 16px);
  --test-line: 1.5;
}

.font-test {
  font-size: var(--test-size);
  line-height: var(--test-line); 
}
</style>
<figure class="preset-box mb3">
  <figcaption class="font-os mb1">frame-dense</figcaption>
  <span class="font-os font-test preset-box frame-apply frame-dense">span</span>
  <button class="font-os font-test preset-button frame-apply frame-dense ccc-black ggg-transparent bbb-black" type="button" disabled>button</button>
  <input class="font-os font-test preset-input frame-apply frame-dense ccc-black ggg-transparent bbb-black" value="input" disabled>
  <span class="font-os font-test preset-box frame-apply frame-dense "></span>
  <span class="font-os">&larr; empty</span>
</figure>
<figure class="preset-box mb3">
  <figcaption class="font-os mb1">frame-basic</figcaption>
  <span class="font-os font-test preset-box frame-apply frame-basic">span</span>
  <button class="font-os font-test preset-button frame-apply frame-basic ccc-black ggg-transparent bbb-black" type="button" disabled>button</button>
  <input class="font-os font-test preset-input frame-apply frame-basic ccc-black ggg-transparent bbb-black" value="input" disabled>
  <span class="font-os font-test preset-box frame-apply frame-basic"></span>
  <span class="font-os">&larr; empty</span>
</figure>
<figure class="preset-box mb3">
  <figcaption class="font-os mb1">frame-plush</figcaption>
  <span class="font-os font-test preset-box frame-apply frame-plush">span</span>
  <button class="font-os font-test preset-button frame-apply frame-plush ccc-black ggg-transparent bbb-black" type="button" disabled>button</button>
  <input class="font-os font-test preset-input frame-apply frame-plush ccc-black ggg-transparent bbb-black" value="input" disabled>
  <span class="font-os font-test preset-box frame-apply frame-plush"></span>
  <span class="font-os">&larr; empty</span>
</figure>