cssのdisplay(inline、inline-block、block)3種の説明

こんにちは、tanaka です。

今回は、cssのdisplay
 ・inline
 ・inline-block
 ・block
この3種類の大まかな
説明いたします。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

display

inline

inline
並びよこ
width、height×
幅の初期値文字の幅
padding、margin上下×
左右○
margin 0 auto使用不可
HTML初期値a
span
strong
img
  1. 主に文字そのものに使われる。
  2. 左右は自動で文字幅に設定され、
    自らwidthを入れることはできない。
  3. 中央寄せに margin 0 auto は使えないので、
    代わりに text-align: center; (親要素へ入れる)
    を使う事になる。
  4. 横並びになるので、リストに使いたいところだが、
    inline-blockを使った方が楽。
  5. line-heightにバックスクリーンが付かず
    透明になる。(行間機能はある)

inline-block

inline-block
並びよこ
width、height
幅の初期値指定しなければ
文字の幅
padding、margin
margin 0 auto使用不可
HTML初期値input
textarea
  • inline と block の良いとこ取り見えるがそうでもない
  • 横並びにすると妙な隙間ができる(親要素にfont-size: 0; で解決)
  • 高さと文字の大きさを同じにすると下に隙間ができる
    (親要素にfont-size: 0; で解決)
  • 中央寄せに margin 0 auto は使えないので、
    代わりに text-align: center;
    を使う事になる。(親要素へ入れる)
  • 見出し+バックグラウンド=題字 として使うと本領を発揮。

block

block
並びたて
width、height
幅の初期値指定しなければ
親要素の幅
padding、margin
margin 0 auto
HTML初期値h1~h6
p
div
ul
ol
li
table
  • ほとんどの初期値がこれ
  • 上下どちらかが block なら縦並びになる。
  • 置き方に悩んだら、display:block にして position か display: flex
    を使えば、大体の問題は解決する。
  • 幅の初期値が親要素なので、
    どこまで幅が継承されているか
    把握する必要がある。
  • 中央寄せは margin 0 auto。(幅の設定必要)
  • block を使ってずれる場合は、初期値を疑ってみよう。
     padding 0
     margin 0
     line-height 1
    思いつく限りの初期化。

以上、
display
(inline、inline-block、block)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました