CSSはインラインブロックとして表示され、background-colorプロパティはコンテンツをカバーしませんdisplay:inline-blockを持つ要素のbackground-colorプロパティは、コンテンツの背景色を変更しません。要素がdisplay:inlineの場合-要素の高さと幅はコンテンツのものです。私の理解によると、display:inline-blockでは、要素は幅と高さを尊重する必要がありますが、コンテンツが指定された高さを超える場合、background-colorプロパティはコンテンツにまたがってインライン要素として動作する必要があります。コードでは、background-colorプロパティはSpan3とSpan4のコンテンツにまたがるべきですが、そうではありません。質問に追加するには、vertical-align:topをspan3とspan4に追加すると、それらは整列しますが、そうでない場合はSpan3は整列しません。インライン要素はベースラインに合わせて整列しますが、この場合、どの要素にもラップされていません。1インライン要素の高さは変更できません。インライン要素でmargin-top、margin-bottomを使用することはできません。インライン要素をinline-blockに変更すると、インラインのように動作しますが、高さとマージン上部マージンマージン底部があります。それらを整列させるには、垂直整列を使用します。HTMLの要素間のスペースを忘れないでください。この例では、最初と2番目のdivの幅はラップに等しくなります。テキストノード(スペース)のために問題があります。class="second"></div>。