CSS イニシャルとディスプレイ インライン

CSSの反映を抑制する

ブロック1
ブロック2
        ブロック2は
    background-color: initial;
    border: initial;
    または、以下のように
    all: unset;
　　

displayのinlineとinline-block

　

Inline Inline

Inline-Block Inline-Block 

        この例では、
        display: inline; の要素は指定した幅や高さを無視して表示されますが、「行内要素として表示」
        display: inline-block; の要素は指定した幅と高さが適用されます。   「行内ブロック要素として表示されます」   
                                           また、マージンとパディングの適用も異なります。

display: inline;

行内要素として表示されます。

要素はその内容の幅だけを持ちます。

高さや幅を設定することはできません。

マージンやパディングは水平方向にのみ適用され、垂直方向には適用されません。

ブロック要素と異なり、新しい行を開始しません。つまり、他の行内要素と同じ行に並んで表示されます。

この要素は行内表示されます 
=code=
<span style="display: inline;">この要素は行内表示されます</pre>
---

display: inline-block;

行内ブロック要素として表示されます。

要素は内容に応じて自動的に幅を持ちますが、幅や高さを設定することができます。

マージンやパディングが水平・垂直方向の両方に適用されます。

新しい行を開始しませんが、他の行内要素と同じ行に並んで表示されます

1,この要素は行内ブロック表示されます

2,この要素は行内ブロック表示されます

=code=1

    .inline-block-examplex {
        display: inline-block;
        width: 100px;
        height: 50px;
        outline: 1px solid red;
        overflow: hidden; /* テキストが枠からはみ出さないようにする */
    }
    <span class="inline-block-examplex">この要素は行内ブロック表示されます</span>

    =code=2
    <span style="display: inline-block; width: 100px; height: 50px;">この要素は行内ブロック表示されます</span>