CSS ブロック要素とインライン要素とDisplayプロパティの挙動 #CSS

概要

CSSを記載するにあたり、ブロック要素とインライン要素に適用されるDisplayプロパティを理解するため、記事にまとめました。
Htmlのブロック要素とインライン要素にDisplayプロパティを適用した際の挙動を試しながら、記載します。

ブロック要素とインライン要素

HTMLの要素にはブロック要素とインライン要素があります。
その性質を表1. にまとまめました。

表1.

項目	ブロック要素	インライン要素
親・子	親要素（h1,p,div etc.）	子要素（span,a,img etc.）
行の占有（並び方）	占有する（縦並び）	占有しない（横並び）
幅と高さの指定	〇	×（反映されない）
余白の指定	水平方向〇、垂直方向〇	水平方向〇、垂直方向×（反映されない）

実際にhtmlとCSSでそれぞれの内容を指定してみると、以下のような感じです。
※子要素は、垂直方向への影響をみやすくするために、LOREMのテキストを記載しています。

HTML

    //HTML//
    <!-- ブロック要素 -->
    <h2>見出し１</h2>　`olive`
    <h2>見出し２</h2>
    <h2>見出し３</h2>

    <!-- インライン要素 -->
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore alias, dolorum impedit eveniet, dignissimos
        exercitationem ut inventore deserunt saepe cum unde deleniti velit culpa laboriosam. Voluptas deleniti sequi ad
        dolores!
        <span>スパン１</span>
        Doloribus fugiat quod facilis distinctio quia aliquam earum incidunt illo iusto eos? Quisquam nam inventore
        blanditiis iste fugit quas consequuntur similique, nemo recusandae aliquam minima velit quasi dolor deleniti
        optio!
        <span>スパン２</span>
        Voluptates aliquid quaerat placeat quae, consequuntur error, tenetur ut nobis, provident dolores tempora sequi
        saepe voluptatibus necessitatibus sed ea repellat tempore id explicabo voluptatem accusamus nulla ad incidunt.
        Doloremque, rem?
        <span>スパン３</span>
    </div>

CSS

h2 {
    background-color: palevioletred;
    width: 100px;
    height: 100px;
    border: 5px solid black;
    padding: 25px;
    margin: 50px;
    /* display: blcok; */
    /* display: inline; */
    /* display: inline-block; */
}


span {
    background-color: olive;
    width: 100px;
    height: 100px;
    padding: 25px;
    border: 5px solid black;
    margin: 50px;
    /* display: block; */
    /* display: inline; */
    /* display: inline-block; */
}

ブラウザ上での出力結果は以下なり、表1の内容通りに動作していることを確認できます。

ブロック要素 h2の幅・高さ、余白

水平方向・垂直方向が設定されており、全てが適用されていることがわかる。

インライン要素 spanの幅・高さ、余白

水平方向・垂直方向が設定されているが、余白の水平方向のみ適用され、それ以外は無視されていることがわかる。

CSS Displayプロパティの挙動

CSSには「Display」プロハティの「block」「inline」「inlin-Block」（「none」もあるが、要素を非表示することであるため、ここでは除く）があり、ブロック要素・インライン要素に適用した場合の、挙動を確認する。
まず、結論を記載すると表2. の通りになる。

表2.

Dispalyプロパティ	ブロック要素	インライン要素
①block	変化なし	ブロック要素に変わる
②inline	インライン要素に変わる	変化なし
③inline-block	幅・高さ・余白を水平・垂直方向に適用したインライン要素になる	同左

①～③、それぞれの挙動をみてみる。

①Block　CSSの「Display: block;」を有効にする。

h2 {
    background-color: palevioletred;
    width: 100px;
    height: 100px;
    border: 5px solid black;
    padding: 25px;
    margin: 50px;
    display: blcok;
    /* display: inline; */
    /* display: inline-block; */
}


span {
    background-color: olive;
    width: 100px;
    height: 100px;
    padding: 25px;
    border: 5px solid black;
    margin: 50px;
    display: block;
    /* display: inline; */
    /* display: inline-block; */
}

①結果

ブロック要素に変化はなし。
インライン要素がブロック要素と同じ挙動をしていることがわかる。

②Inline　CSSの「Display: inline;」を有効にする。

h2 {
    background-color: palevioletred;
    width: 100px;
    height: 100px;
    border: 5px solid black;
    padding: 25px;
    margin: 50px;
    /* display: blcok; */
    display: inline;
    /* display: inline-block; */
}


span {
    background-color: olive;
    width: 100px;
    height: 100px;
    padding: 25px;
    border: 5px solid black;
    margin: 50px;
    /* display: block; */
    display: inline;
    /* display: inline-block; */
}

②結果

ブロック要素はインライン要素と同じ挙動をしていることがわかる。
インライン要素に変化はなし。

③Inline-Block　CSSの「Display: inline-block;」を有効にする。

h2 {
    background-color: palevioletred;
    width: 100px;
    height: 100px;
    border: 5px solid black;
    padding: 25px;
    margin: 50px;
    /* display: blcok; */
    /* display: inline; */
    display: inline-block;
}


span {
    background-color: olive;
    width: 100px;
    height: 100px;
    padding: 25px;
    border: 5px solid black;
    margin: 50px;
    /* display: block; */
    /* display: inline; */
    display: inline-block;
}

③結果

ブロック要素はインライン要素が双方とも同じ挙動をしていることが分かる。

ブロック要素はインライン要素と同じように行の占有が解除されている（横並び）になっていることが分かる。その他は、ブロック要素のまま。
インライン要素は、ブロック要素と同じように、幅・高さ・余白の垂直方向のスタイルが適用されていることがわかる。横並びはインライン要素のまま。

まとめ

html上のブロック要素とインライン要素の扱いとDisplayプロパティの適用結果を確認できました。CSSを充てることで、ブロック要素をインライン要素の用にスタイル変更することや、インライン要素をブロック要素のようにスタイル変更できること、またインライン要素とブロック要素の両方を取り入れることができることが、①～③の挙動で確認ができます。
html、CSSを学び始めて、ブロックとインラインの違いがわかっていませんでしたが、記事を書き進める中で理解ができました。
私同様に、Webを学び始めた方に少しでも助けになれば幸いです。

CSS ブロック要素とインライン要素とDisplayプロパティの挙動

概要

目次