display:block;

インライン要素をブロック要素に変更する

例.html

    <span>インライン要素だよーん</span>

例.css

span {
  background-color: red;
  width: 300px;
  height: 100px;
}

このように width: 300px; と height: 100px; というふうに幅と高さを指定した。
しかしWebでは・・・
↓

このようにしか表示されない。
これはHTMLの＜span＞タグがインライン要素のため幅と高さを指定することができない。
ではどうすればいいのかというと、幅と高さを指定できるのはブロック要素なのでブロック要素にしてしまえばいい

CSSを下記のように追加して・・・

例.css

span {
  background-color: red;
  width: 300px;
  height: 100px;
  display: block;
}

Web
↓

はい、できた

display:inline;

ブロック要素をインライン要素に変更する

例.html

<p>ブロック要素だよーん</p>

例.css

p {
  background-color: red;
  width: 300px;
  height: 100px;
}

Web
↓

＜p＞タグはブロック要素のため高さも幅も指定できます
これを下記のようにCSSに display:inline; を追加すると・・・

インライン要素になりました

以前、ブロックレベル要素とインライン要素についてまとめたのですが、意味をまとめただけだったので、ここで前回に追加してまとめてみます。

ブロック要素とインライン要素の特徴をあわせもつ（インラインブロック要素という）
幅と高さが指定できる
内側、外側ともに余白が設定できる
配置を横並びにできる

ブロック要素はというと
↓

このように縦並びとなる。

インライン要素はというと
↓

このように横並びとなる。
インラインブロック要素は横並びとなる。
もう一度インラインブロック要素を含めてまとめると

このようになります