この場合、インライン、インラインブロックの間でshow differentですか？

Question

このコードでは、divの高さは1行の高さです。 2番目のスパンの表示がインラインブロックの場合、divの高さは2行の高さになります。

<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline; background: #ff3d00;"></span> 
 
</div> 
 
<hr /> 
 
<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline-block; background: #ff3d00;"></span> 
 
</div>

は、どのように私はその番組だけ1行の高さを作ることができますか？

Answer 1

親divにfont-size：0を追加して、子に必要なフォントサイズを追加できます。これは、インラインブロック要素間のスペースのために発生します。

<div style="border:1px solid #00b0ff; width:200px; font-size:0"> 
     <span style="width:100%;display: inline-block;background: #00b0ff; font-size:14px;">1</span> 
     <span style="display: inline-block; background: #ff3d00;"></span> 
</div> 

Answer 2

あなたは、あなたが空のスパンを非表示にする:empty疑似クラスを使用することができ、CSSを使用することができます。

span:empty { 
 
    display: none !important; 
 
}

<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline; background: #ff3d00;"></span> 
 
</div> 
 
<hr /> 
 
<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline-block; background: #ff3d00;"></span> 
 
</div>

Answer 3

あなたは親要素の幅（style="width:100%"）の100％を取るために最初<span>を定義しました。これを削除すると、<div>は1行高くなります。スペースはインラインブロックとインライン要素の間でこれを喚起していない理由を

<div style="border:1px solid #00b0ff; width:200px;"> 
 
     <span style="display: inline-block; background: #00b0ff">1</span> 
 
     <span style="display: inline-block; background: #ff3d00;"></span> 
 
    </div>