displayで取ることのできる値

displayには主に以下の値を指定することができます。

この他にもdisplayの値はあります。詳しくはこちらのサイトをご覧いただければなと…！
ただ今回は上記のdisplayの値をすべて説明するのではなく、よく使用される「block」「inline」「inline-block」「none」の4つについてお話ししていきます。

displayプロパティの初期値

htmlの要素にはdisplayプロパティの初期値が設定されています。
cssでdisplayプロパティの値を指定しない場合は、下記の要素に分けられます。

displayプロパティの値を変更する方法

初期値でdisplayプロパティの値は設定されていますが、cssで指定することにより変更が可能です。例えば、初期値がblockのpタグをinlineにしたい場合は以下のように指定します。

＜html＞

              p {
              display: inline;
              }
          

並び方について

blockは縦に並びます。
例として以下のように、blockであるpタグに色を付けてみました。要素の前後には改行が入り、やはり縦に並んでいることがわかると思います。

＜html＞

						<div class=”wrap”>
						<p class=”orange”></p>
						<p class=”green”></p>
						</div>
          

＜css＞

						.wrap .orange {
						background: orange;
						}
						.wrap .green {
						background: green;
						}
					

幅(width)と高さ(height)

blockは幅(width)と高さ(height)が指定できます。
それでは幅(width)100pxと高さ(height)100pxに指定してみます。

＜html＞

						<div class=”wrap”>
						<p class=”orange”></p>
						</div>
          

＜css＞

						.wrap .orange {
						width: 100px;
						height: 100px;
						background: orange;
						}
					

しっかりと幅と高さが指定されました。

余白

blockはmarginやpaddingで余白を指定できます。ちなみにmarginは要素の外側の余白、paddingは要素の内側の余白になります。
ではこちらも実際に余白を指定してみましょう。わかりやすく緑も追加します。

＜html＞

						<div class=”wrap”>
						<p class=”orange”>ブロックです</p>
						<p class=”green”>ブロックです</p>
						</div>
          

＜css＞

						.wrap .orange {
						background: orange;
						}
						.wrap .green {
						background: green;
						}
						.wrap p {
						margin: 10px;
						padding: 10px;
						}
					

marginとpaddingにそれぞれ10pxを指定すると、以下の通り余白が確保できました。

text-alignとvertical-alignについて

簡単にtext-alignとvertical-alignについて説明いたします。text-alignとは、テキストの水平方向への配置を指定するプロパティです。一方vertical-alignは、垂直方向への配置を指定するプロパティです。
blockはtext-alignとvertical-alignを指定すると、要素自体には反映されず中のテキストのみが反映されます。

＜html＞

						<div class=”wrap”>
						<p class=”orange”>ブロックです</p>
						</div>
          

＜css＞

						.wrap .orange {
						width: 150px;
						text-align: center;
						background: orange;
						}
					

「text-align: center;」を指定すると、要素自体は左に寄っていますがテキストが要素の中央に配置されました。このようにtext-alignとvertical-alignを指定しても、要素そのものには反映されないことがわかります。