html - 空のスパンの高さをデフォルトの行の高さに等しく設定するにはどうすればよいですか？

Question

<span>私は要素のセットを持っています（それらのそれぞれは特派員にネストされています<div>）。下の写真のように、パネルのスタックを構築します。

スパンにテキストが含まれている場合、通常の高さになります。ただし、空の場合、高さは0pxです。しかし、私はそれが通常の高さである必要があります（写真のように見えるようにするため）。

この動作を実現する方法は？（スペースを挿入しようとしましたが、もっと良い解決策があるかもしれません）。

Answer 1

シンプルで堅牢なソリューションは次のとおりです。

span.item:empty:before {
  content: "\200b"; // unicode zero width space character
}

（ 2015年12月18日更新：ノーブレークスペースを使用するのではなく、を使用します。これもノーブレークスペースですが、幅はゼロです。https：//stackoverflow.com/a/29355130/516910で他の回答を参照してください。）。\00a0\200b

このCSSセレクターは、「空の」スパンのみを選択し、その空のスペース、つまりノーブレークスペース文字にコンテンツを挿入します。<span>したがって、設定したフォントサイズと行の高さに関係なく、その周りにテキストが存在するかのように、その周りのすべてが行に<span>なります。これはおそらくあなたが望むものです。

http://plnkr.co/edit/eXHphA?p=preview

結果は次のようになります。

---

使用には2つの問題がありmin-heightます。

1. フォントサイズが変更される場合は脆弱です
2. テキストベースラインが正しい場所にありません

問題が発生した場合の反例は次のようになります。

1. フォントサイズが変更されたため、最小の高さを再度手動で調整する必要があります。同じクラスを使用して、フォントサイズが異なるWebサイトのさまざまな部分をサポートすることはできません。ここでは、この場所のフォントサイズは30ですが、最小の高さは20に設定されています。したがって、空のスパンの高さはそれほど高くありません。:-(

http://plnkr.co/edit/zeEvca?p=preview

2. 空のスパンの高さはmin-heightで正しいですが、スパンを囲むテキストと正しく一致していません。ベースラインが正しく落ちません。「え？」という行を見てください。下：

http://plnkr.co/edit/GGd7mz?p=preview

この最後の例のコード：

<div class="group">
  Hello <span class="item">Text</span>
</div>
<div class="group">
  Huh? <span class="item"></span>
</div>
<div class="group">
  Yes! <span class="correct"></span>
</div>

css：

.group {
  background-color: #f1f1f1;
  padding: 5px;
  font-size: 20px;
  margin-bottom: 20px;
}

.item {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
  min-height: 20px;
}

.correct {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
}
.correct:empty:before {
  content: "\00a0";
}

Answer 2

span display：inline-block;を設定できます。次に、最小の高さを追加します

Answer 3

写真から、あなたはすでに要素を設定display: blockしているようです。spanそうでない場合は、それを追加します。または、代わりに使用することを検討してdivください。2つの要素の違いは、spanデフォルトではインラインであり、デフォルトでdivはブロックであるということです。後者を使用してみませんか？

min-height次に、コンテンツを含むアイテムの高さに等しい値に設定する必要があります。これは通常、線の高さによって決まります。デフォルトの行の高さはフォント（およびブラウザ）によって異なるため、一貫した結果を得るには、行の高さを明示的に設定します。

* { line-height: 1.25; }
span { min-height: 1.25em; }

Answer 4

多分これはうまくいくでしょう-

span{
  min-height:16px;
}