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

こんにちは、tanaka です。

今回は、display(inline、inline-block、block)

この3種類の大まかな説明をします。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

display

<inline>

inline
並びよこ
width、height×
幅の初期値文字の幅
padding、margin上下×
左右○
margin 0 auto使用不可
HTML初期値a
span
strong
img

<inlineの特徴>

1:主に文字を入れる器として使われる

2:基本的に左右は自動調整される

3:widthの設定はできない

4:中央寄せは「text-align: center;」

5:行間へバックスクリーンが入らない(文字の幅だけバックスクリーン)

<inline-block>

inline-block
並びよこ
width、height
幅の初期値指定しなければ
文字の幅
padding、margin
margin 0 auto使用不可
HTML初期値input
textarea

<inline-blockの特徴>

1:横並びにすると隙間ができる(親要素にfont-size: 0; で解決)

2:全体の高さと文字の大きさを同じにすると下に隙間ができる(親要素にfont-size: 0; で解決)

3:中央寄せは「text-align: center;」

<block>

block
並びたて
width、height
幅の初期値指定しなければ
親要素の幅
padding、margin
margin 0 auto
HTML初期値h1~h6
p
div
ul
ol
li
table

<blockの特徴>

1:ほとんどの初期値がこれ

2:タテ並びになる。

3:widthの初期値が親要素のwidth

4:中央寄せは margin 0 auto(widthの設定忘れずに)

5:デフォルト値の初期化が必要。

padding: 0;
margin: 0;
line-height: 1;

以上
cssのdisplay(inline、inline-block、block)3種の説明
の話でした。

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

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