ブロック要素とインライン要素間の変換方法を詳しく解説

1. ブロック要素とインライン要素間の変換

ブロックレベル要素とインライン要素間の変換については、CSS を使用した後、このブロック要素とインライン要素の属性 の違いを解決できます。違いではなくなります。たとえば、display:block のような属性を inline 要素に追加すると、毎回新しい行から開始するという属性も持たせることができます。つまり、同様に block 要素を追加できます。 display:inline のような属性をブロック要素に追加すると、これも 1 行に並びます。

2. display: inline と display: block

display: inline: インラインとして表示し、高速要素をインライン要素に変換し、インライン要素タグの特性を持ちます。

display: block: インライン要素をブロックレベルの要素に変換し、ブロック要素タグの特性を備えたブロックとして表示します。

3. ブロックレベルの要素をインライン要素に変換し、display: inline を使用します。

nbsp;html>
    
        <meta>
        <title></title>
        <style>
            p{
                height: 50px;
                background-color: yellow;
                width: 500px;
                display: inline;
            }
        </style>
    
    
        <p>p1</p>
        <p>p2</p>
    

コードスニペットの実行結果:

はブロックレベル要素をインライン要素に変換することに成功し、インライン要素の特性を備えています。

4. インライン要素をブロックレベルの要素に変換し、display: block を使用します。

nbsp;html>
    
        <meta>
        <title></title>
        <style>
            span, em{
                height: 200px;
                background-color: yellow;
                width: 200px;
                margin: 50px;
                display: block;
            }
        </style>
    
    
        <span>span1</span>
        <em>em2</em>
    

コードセグメントの実行結果:

インライン要素はブロックレベル要素に正常に変換され、ブロックレベル要素の特性を持ちます。

5. ディスプレイ

display: ラベルをページに表示されるタイプに変換しても、ラベルの性質は変わりません。

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