インライン要素またはインラインブロック要素間のギャップを削除する方法

インラインまたはインライン ブロック要素間のギャップを削除する方法は、要素タグ間のスペースを削除し、負のマージンを使用し、親要素のフォント サイズをゼロに設定し、終了タグを省略します。

ページレイアウトでは、インライン要素とインラインブロック要素をよく使用しますが、必ず問題が発生します。それは、これらの要素の間にギャップがあるということです。では、これらの要素間のギャップを削除するにはどうすればよいでしょうか?以下にいくつかの方法を紹介します（例として inline 要素を取り上げます）。皆様の参考になれば幸いです。 [推奨される関連ビデオ チュートリアル: HTML チュートリアル、CSS チュートリアル]

<div class="demo">     
     <span>我是一个span。</span>
       <span>我是一个span。</span>
     <span>我是一个span。</span>
     <span>我是一个span。</span>
     <span>我是一个span。</span>
</div>

レンダリング:

要素タグ間のスペースを削除します

要素間にギャップが表示される原因は、要素タグ間のスペースです (ブラウザーは HTML 内の改行文字を処理し、スペースはコンテンツに解析されます。)、スペースを削除すると、ギャップは自然に消えます。要素タグ間のスペースを削除するには、いくつかの方法があります。

方法 1:

.demo{
	width: 450px;
	height: 200px;
	margin: 10px auto;
	font-size: 20px;	
}
.demo span{
	background:#ddd;
}

方法 2:

<div class="demo">
    <span>我是一个span。</span><span>我是一个span。</span><span>我是一个span。</span><span>我是一个span。</span><span>我是一个span。</span>
</div>

方法 3: HTML コメント タグ

HTML コメント タグ を使用して、要素間のスペースをコメント化します。参照を許可します。プロセッサはスペースを解析しなくなりました。

<div class="demo">
    <span>我是一个span。
    </span><span>我是一个span。
    </span><span>我是一个span。
    </span><span>我是一个span。
    </span><span>我是一个span。</span>
</div>

レンダリング:

負のマージンを使用します

設定を使用できます。要素を元の位置に戻すには、margin 属性を負の値にします。親のフォント サイズに応じて調整する必要があります。

<div class="demo">
    <span>我是一个span。</span><!--
    --><span>我是一个span。</span><!-- 
    --><span>我是一个span。</span><!-- 
    --><span>我是一个span。</span><!--
    --><span>我是一个span。</span>
</div>

注: これは古い IE (6 および 7) では問題があります。

親要素の font-size を 0 に設定します:

スペースは文字スペースであるため、font-size もゼロに設定しますスペースのサイズをゼロにします。ただし、他の要素を表示するには、子要素のフォント サイズを希望のサイズに戻す必要があります。

span{
margin-left: -6px;
}

終了タグを省略する

HTML5 では、終了タグを省略し、タグ間のスペースを削除できます。ただし、IE6/IE7 との互換性を保つために、最後の要素の終了タグを追加できます。

.demo{
    width: 400px;
    height: 200px;
    font-size: 0;
}
.demo span{
    background:#ddd;
    font-size: 20px;
}

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！

以上がインライン要素またはインラインブロック要素間のギャップを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。