CSSで、内容がないときでもテキスト1行分の高さを確保する方法

CSSで、内容がないときでもテキスト1行分の高さを確保するには、次のようにすればよい。

.container::before {
  content: "";
  display: inline-block;
}

☞ デモ

未来

lhという単位が草案にある。1lhはテキスト1行分の高さに等しい。これが使用可能になれば、次のようにできるであろう。

.container {
  min-height: 1lh;
}