blockとinlineとは?(displayプロパティ)

 HTML/CSSを取り組んでいる人は誰もがこの概念に頭を悩ませたことがあるでしょう。
これらはdisplay要素を扱うときにも必要な知識となります!
実際プログラミングを約半年している私も時々こんがらがってしまうことがあります、、

 そこで、今回は私自身もまだフワフワとしているこのインライン要素とブロック要素についてまとめたので皆さんの参考になればなと思います。

 blockとは一つのかたまりとして認識される要素でそのかたまりとは文章の横幅全体をしめます。

上記のようなコードとなっており、display:blockの特徴として

要素は縦に並ぶ

幅と高さが変更可能

widthやheightでそれぞれ指定することができます。

余白も変更可能

paddingやmarginで好みの余白を指定することができます。

text-alignやvertical-alignは無効

要素の中身であるテキストや画像はtextalign:centervertical-align:centerが反映されますが、blockの要素自体は適用されません。

といった特徴があります。

display:inlineとは?

blockの要素の中の内容として文章の一部分として扱われ、要素の中身に応じて幅や高さが決まります。

上記のようなコードとなっており、ブロック要素の特徴として

要素が横並びになる

practice-block3内の3つのpractice-inlineのspanクラスを見るとわかると思います。

blockの要素のなかで用いられる

display:blockはinlineの要素を収納できますが、要素の中身で幅と高さ決まるinlineの要素に基本的にはブロック要素を入れることができません。

幅と高さは変更不可

要素の中身で幅と高さが決まるので文字の大きさやテキストの長さを変更しなければinlineの要素自体は変更できません。

上下の余白は変更不可

paddingやmarginで左右の余白は調整できるのですが、上下の余白は調整できません。
実際にはpaddingのみ上下の指定はできるのですが、上手く指定しないとデザインが損なわれてしまう可能性があります。

text-alignやvertical-alignは変更可能

text-alignは親要素に指定することでinlineの要素の水平方向についての指定ができます。一方、vertical-alignはインライン要素に直接指定することで垂直方向に関する指定ができます。

blockに変更可能

CSSでdisplay:blockと指定することでinlineの要素からblockの要素に変更することができます。これによりwidthやheightも変更可能になります。

まとめ

今回display:blockとdisplay:inlineの知識をまとめてみました。

ただ、うやむやにCSSの勉強をするのではなく、Webページの大半の構造を占めるこの二つの要素を知っておくと、効率的に学習できると思います。

ぜひ、皆さんのプログラミング学習の参考になればと思います。

参考記事

【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
CSSの難関「display」プロパティについて初心者でも分かるように丁寧に解説します。inline、block、inline-block、noneとは?違いは?

コメント

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