displayの要素について

displayの基本

block

display: block;
改行が入り、縦並び。

inline

display: inline;
改行が入らず、横並び。幅のみ指定可能。

inline-block

display: inline-block;
改行が入らず、横並び、高さ・幅指定可能。

none

display: none;
表示されない。

表示して比較してみた。

共通html
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
共通css
p {
display: 値;
background: #eee;
border: dashed 1px #000;
padding: 10px;
margin: 10px;
}

値:block

サンプル1

サンプル2

サンプル3

値:inline

サンプル1

サンプル2

サンプル3

paddingもmarginも左右にのみ有効。
途中で折り返したり、改行を入れるとつぶれる。

サンプル1

サンプル2

サンプル3


サンプル1

サンプル2

サンプル3

値:inline-block

サンプル1

サンプル2

サンプル3

paddingもmarginも有効。
途中で折り返したり、改行を入れてもつぶれない。

サンプル1

サンプル2

サンプル3


サンプル1

サンプル2

サンプル3

値:none

サンプル1

サンプル2

サンプル3

何も表示されない。設定したcssも無効。
空白を残したい場合はvisibility:hidden;を使う。

サンプル1

サンプル2

サンプル3

使用例

リンク:block

普通のリンク displayをblockにしたリンク

余白部分もリンクが有効になる。

リスト:inline-block

  • 普通のリスト1
  • 普通のリスト2
  • inline-blockのリスト1
  • inline-blockのリスト2
  • inline-blockのリスト3
  • リスト4
  • リスト5
  • リスト6