css - 当文本设置为空白时，如何保留文本贡献的高度

Question

考虑一个 inline-block CSS 元素，它可以包含文本，并且有一些很好的填充。

根据 inline-block 中是否有任何文本，元素的高度会有所不同：

.text-holder {
  display: inline-block;
  color: #ffffff;
  padding: 10px;
  vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }

<div class='text-holder black'>I HAVE TEXT</div>
<div class='text-holder grey'></div>

如何确保这些元素的高度相同，无论元素内是否有任何文本，以及字体大小如何？

起初我考虑min-height过，但我认为这不适用于可变字体大小。

标签： css

Answer 1

为空时使用零空格字符：

.text-holder {
  display: inline-block;
  color: #ffffff;
  padding: 10px;
  vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }

.text-holder:empty::before {
  content:"\200B";
}

<div class='text-holder black'>I HAVE TEXT</div>
<div class='text-holder grey'></div>

您也可以为所有元素保留它，因为它的宽度为 0：

.text-holder {
  display: inline-block;
  color: #ffffff;
  padding: 10px;
  vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }

.text-holder::before {
  content:"\200B";
}

<div class='text-holder black'>I HAVE TEXT</div>
<div class='text-holder grey'></div>

如果有前导空格，请注意：

.text-holder {
  display: inline-block;
  color: #ffffff;
  padding: 10px;
  vertical-align: top;
}
.text-holder.black { background-color: #000000; }
.text-holder.grey { background-color: #606060; }

.text-holder::before {
  content:"\200B";
}

<div class='text-holder black'>I HAVE TEXT</div><br>
<div class='text-holder black'> I HAVE TEXT</div>
<div class='text-holder grey'></div>