displayプロパティについての基本のまとめ。
display プロパティの役割
displayプロパティは、ブッロクレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する場合に使用します。
取ることの出来る値
1、block
2、inline
3、inline-block
4、none
他にもdisplayの値はあるが、基本のこの4つについて解説していこうと思う。
display: blockについて
divタグやpタグ、h1~h6の見出しタグなどは、デフォルトでblockになっている。
特徴
要素の前後には改行が入り、縦に並ぶ。
幅と高さを指定できる。
paddingやmarginなどの余白も上下左右に指定できる。
text-alignやvertical-alignの指定はできない。
display: inlineについて
spanタグやaタグ、imgタグなどはデフォルトでinlineになっている。
特徴
要素の間には改行が入らず横に並ぶ。
基本的にblockの中で用いられる。
widthとheightを指定できない。
左右のpadding,marginは指定できるが、上下の指定はできない。（paddingの上下は指定できるが、paddingを大きくすると、改行されたときに前後の行とかぶってしまいデザインが崩れるためあまり使用しないほうがいい。）
text-alignやvertical-alignが指定できる。
display: inline-blockについて
inlineとblockの間を取ったようなもの。
特徴
改行が入らず横に並ぶ。
width、heightの指定ができる。
padding,marginの指定もできる。
text-alignやvertical-alignが指定できる。
使いどころはメニューバーなど。
display: noneについて
この値を指定された要素は、ブラウザ上で非表示になります。
しかしあくまで非表示になるだけで、ウェブページが開かれるときには普通に読み込まれている。