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

【问题标题】：How to ensure empty span matches height of sibling如何确保空跨度与兄弟的高度匹配
【发布时间】：2018-07-06 06:26:59
【问题描述】：

On codepen I'm testing some frame classes span button input 和一个空的 span。为了确保空的span 与我正在使用的其他人的高度相匹配calc 数学给它min-height 但这个计算似乎需要知道line-height。有没有办法在不需要知道line-height 的情况下确保min-height？另外我不明白为什么vertical-alignmiddle 将空的与其他对齐，而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); 
}

【问题讨论】：

标签： css alignment vertical-alignment

【解决方案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/structure@0.36.0/main.css">
<link rel="stylesheet" href="https://unpkg.com/@plangrid/structure@0.36.0/root.css">
<link rel="stylesheet" href="https://unpkg.com/@plangrid/paint@0.34.0/blending.css">

<link rel="stylesheet" href="https://unpkg.com/@plangrid/paint@0.34.0/live.css">
<style>
/*
Preset classes in HTML are from
https://unpkg.com/@plangrid/structure@0.36.0/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>

【讨论】：