CSS の行レベル要素とブロックレベル要素の間で変換する方法

CSS では、display 属性を使用して行レベル要素とブロックレベル要素を変換できます。行レベル要素に「display:block;」スタイルを設定して、ブロックレベル要素に変換します。行レベル要素に変換するように「display:inline;」スタイルを設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

インライン要素

span、i、a、img など。行内に表示する場合、幅と高さを設定できない要素は一般にインライン要素です。

ブロックレベル要素

div、h1、p、li など。独自の行を占有し、幅と高さを設定できる要素は、ブロックレベル要素です。

ブロック レベル要素をインライン要素に変換する

ブロック レベル要素に display: inline; を設定して、ブロック レベル要素を作成しますインライン要素になります。

インライン要素をブロックレベル要素に変換する

インライン要素に display:block; を設定して、インライン要素をブロックレベル要素に変換します。

ブロック レベル要素またはインライン要素を

に変換します。 display: inline-block; を設定して、ブロック レベル要素またはインライン要素を次のようにします。インラインのブロックレベル要素であり、同じ行に表示できます。 [推奨チュートリアル: CSS ビデオ チュートリアル ]

CSS 表示属性

表示属性は、要素が生成するボックスのタイプを指定します。

• block この要素は、この要素の前後に改行を入れて、ブロック レベルの要素として表示されます。

• インラインデフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。

• #inline-block インライン ブロック要素。 (CSS2.1 の新しい値)

プログラミング関連の知識については、プログラミング ビデオ をご覧ください。 ！

以上がCSS の行レベル要素とブロックレベル要素の間で変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。