ブロック、インライン、インラインブロックの違い、出来ることと出来ないこと。CSSでスタイルの変換方法

このページのまとめ

CSSの指定をする上で注意する点

	block	inline	inline-block
改行	改行される	改行されない	改行されない
width、height	編集可能	編集できない	編集可能
margin、padding	編集可能	左右は編集可能 上下はできない	編集可能
html	h1、h2…、p、ul、ol、div…	a、img、br、em、input、span…	なし
CSSに記入してスタイルを変更するプロパティ	display: block	display: inline	display: inline-block

詳しく見ていきましょう

ブロック、インライン、インラインブロックの違いと特徴

ブロック、インライン、インラインブロックで表示形式と適用できるスタイル（CSS）が違います。

ブロック(block)とは

1. 【特定のhtml言語】h1、h2、h3…、p、ul、ol、div……
2. 【他の要素をブロックにする方法】CSSに「display: block; 」を書いて指定する。

特徴

• 横幅はいっぱいに広がり、前後で改行される。
• margin、padding指定可能。
• width、heightの指定可能。

インライン(inline)とは

1. 【特定のhtml言語】a、img、span、br、strong、em、input、lavel、textarea……
2. CSSに「display: inline; 」を書いて指定する。

特徴

• 改行されず、次に来る要素は横に並ぶ。
• width、heightは、指定できない。（指定しても変化なし）
• margin、paddingは、左右は指定可能、上下はできない。（上下は指定しても変化なし）

• img、input、textareaなどの一部のタグは横幅・高さや余白の設定が可能。

インラインブロック(inline-block)とは

1. 【特定のhtml言語】なし
2. 【他の要素をブロックにする方法】CSSに「display: inline-block; 」を書いて指定する。

特徴

• 改行はされず、次に来る要素は横に並ぶ
• width、heightを指定可能
• margin、paddingは、上下左右に指定可能。

CSSでスタイルの変換方法

CSSで下記のいち文を加えるだけで、スタイル変更が可能。

• display: block;　…　表示形式をブロックにする
• display: inline;　…　表示形式をインラインにする
• display: inline-block;　…　表示形式をインラインブロックにする
• display: none;　…　非表示にする

HTML5での要素分類の廃止

HTML5ではブロックレベル要素とインライン要素の分類は無くなりました。

HTML5では、「コンテンツ・モデル」になり、というコンテンツの種類が定義されています。

コンテンツモデル

• メタデータ
• フロー
• セクション
• ヘッディング
• フレージング
• エンベッディッド
• インタラクティブ

まとめ

CSSの指定をする上で注意する点

	block	inline	inline-block
改行	改行される	改行されない	改行されない
width、height	編集可能	編集できない	編集可能
margin、padding	編集可能	左右は編集可能 上下はできない	編集可能
html	h1、h2…、p、ul、ol、div…	a、img、br、em、input、span…	なし
CSSに記入してスタイルを変更するプロパティ	display: block	display: inline	display: inline-block