displayプロパティについて理解りかいしよう【CSSを書かいていこう】

displayプロパティの種類しゅるいを確認かくにんしていきます

• block
• inline
• inline-block

block

前回ぜんかいは余白よはくについて見みてきました。

詳くわしくは『marginの相殺そうさいについて理解りかいを深ふかめよう【CSSを書かいていこう】』を御覧ごらんください。

あわせて読よみたい

marginの相殺そうさいについて理解りかいを深ふかめよう【CSSを書かいていこう】 marginが垂直すいちょく方向ほうこうに重かさなったときに発生はっせいするmarginの相殺そうさいについて見みていきます。 marginの相殺そうさい 前回ぜんかいまででマージンの外側そとがわの余白よはくについて見みてきました。 詳くわしくは『margin...

今回こんかいはdisplayプロパティについて見みていきたいと思おもいます。

displayプロパティとは要素ようその種類しゅるい分わけしたようなものになります。

これまで見みてきた要素ようそはすべてdisplayプロパティが設定せっていされていて大おおきく分わけてdisplay: block;とdisplay: inline;とがあります。

これらの違ちがいについて詳くわしく学まなんで行いきます。

まずblockの方ほうは<h1>, <p>, <div>, <section>タグなどに設定せっていされています。

blockの特徴とくちょうとしてはページに追加ついかされたとき要素ようそは下したに追加ついかされていきます。また要素ようそは初期しょき値ちでwidthが親しん要素ようその幅はばいっぱい、heightはコンテンツの高たかさになります。

更さらに、blockはwidthやheightの幅はばや高たかさがサイズ指定していできる仕様しようになっています。

inline

次つぎにinlineの方ほうは<img>, <span>, <a>, <input>タグに設定せっていされていて比較的ひかくてき文中ぶんちゅうに配置はいちされることが多おおい要素ようそです。

inlineの特徴とくちょうとしては要素ようそは左ひだり詰づめに追加ついかされていきます。また要素ようそは初期しょき値ちでwidthもheightもコンテンツの幅はばと高たかさになります。

ただ、inlineはwidthやheightの幅はばや高たかさがサイズ指定していできません。widthやheightを指定していしたい場合ばあいはinline-blockを指定していしてあげましょう。

inline-block

それぞれinline, blockの要素ようそに対たいしてdisplay: inline-blockと指定していしすることができます。

特徴とくちょうとしては左ひだり詰づめに要素ようそが追加ついかされ、サイズの操作そうさが有効ゆうこうになるのでwidthとheightを指定していすることができます。

以上いじょう