『display: block, inline, inline-block』を見直してみた。
皆さん、こんにちは。元アパレル、現フロントエンドエンジニアのセイです！
今回はこれからHTML,CSSを始める、もしくはまだ始めたばかりの人のためによく使う基本的なdisplayプロパティについて解説したいと思います！
今回解説するプロパティは
- dipslay: block
- dipslay: inline
- display: inline-block
この3点です。displayで選択出来る値は他にもtable, flex, 特に新しいものではgridなどもありますが、やはり仕事で扱うためには基本をしっかりと抑えることが重要ですので、まずはこれらのプロパティから覚えていきましょう！
display:block
display: blockは一番よく使われているであろう値ですね。
HTMLの要素である<p>や<div>タグにはデフォルト値としてdisplay: blockが設定されています。
display:block が指定されている要素は文字通りHTMLの画面上でブロックを作り、一つのまとまりとしてブラウザに解釈されるのでこの前後に改行を伴ってレイアウトされます。
この要素は
- width
- height
- margin
- padding
などの大きさや位置などをを指定するプロパティを使用することが出来ます。
画面の構成を決めていくブロックということで全体的なレイアウトに関わるプロパティを扱うことが出来るんですね！
display:inline
display: inlineはdiplay:blockの要素の中身として使われるプロパティです。
<a>や<span>タグにはデフォルト値としてdisplay:inlineが指定されています。
display:inline が指定されている要素はdisplay:blockとされている要素の中の行ボックスに配置されます。
inlineの要素はblockと違い、改行が入らず横並びに並びます。
下記の図は親要素であるblockにfont-size:40pxを指定し、その中にfont-size:20pxのspan要素、font-size:10pxのspan要素を並べたものです。
アルファベットの『x』の下端がbaseline上に並んでいるのが分かります。
親要素に特に指定が無い場合はこのbaselineに沿ってテキスト等が配置され、vertical-alignを指定した場合はそれぞれの指定した基準線に合わして配置されます。
文字の位置がうまく揃わないって時はこの基準線と文字の関係を考えるといいですね！
またdisplay:inlineが指定されている要素は
- width
- height
- margin
が指定出来ないようになっています。ブロックの中身の部分なんでレイアウトに関係するプロパティは働きません！
display:inlineと指定された要素の大きさは基本的に中に含まれている文字などの大きさに依存します。
display:inline-block
最後にdisplay:inline-blockです！
inlineでblock??って僕は最初悩みました。
display:inline-blockと指定された要素はdisplay:blockの行ボックスにdisplay:inlineの要素と同様に配置されます。横並びです。
ただし、文字の代わりにブロックが入ったと思ってください。
この中の黄色の部分がdisplay:inline-blockとなっております。
文字の代わりにブロックが入っているので
- width
- height
- margin
- padding
が指定出来るようになっております。
display:inline-blockの要素はデフォルトでは要素の下端が行ボックスのbaselineに合うように配置されます。
例えばですが、この下に隙間が空く構図見たことありませんか？<img>タグを使うときにたまーになりますよね！
画像もdisplay-inlineと同様に配置されるので、baseline上に画像の下端が合ってしまい隙間が空いちゃっているんですねー。
なのでこのような場合はvertical-align:bottomと指定して基準にする位置を変えてあげることで隙間が消えます。
HTML,CSSを触りたての頃だと、とりあえずvertical-alignを指定すれば直るのようなざっくりとした覚え方になりがちですが、理屈が分かると安心して使えますね！
………………………………
…………………………
…………………
駆け足で進めてまいりましたが以上です！
displayプロパティの捉え方に関しては様々なwebページで解説されているかと思います。
今回は自分自身が特に理解しづらかった点を中心に説明させていただきました。この記事がdisplayプロパティの理解に悩む方の手助けになれば幸いです。
０からエンジニアとして仕事が出来るようになるまでたくさん壁があるかとは思いますが頑張りましょう！
ではまた！
メゾンマークでは一緒に学び、高め合っていける仲間を募集しております。
