block, inline, inline-blockの違い

「display」は表示形式を設定するプロパティです。「display」で設定できる「block」「inline」「inline-block」の違いについて解説します。

目次

block, inline, inline-block

body要素内で使われる要素の多くは、「ブロックレベル要素」「インライン要素」「インラインブロック要素」に分類されます。それぞれの特徴は下記の通りです。

項目ブロックレベル要素インライン要素インラインブロック要素
要素pdivtableformfieldsetaddressblockquote h1~h6hrpredlulol などaemlabelspanstrong などimginputselecttextarea など
改行改行される改行されない改行されない
width×
height×
margin左右○ 上下×
padding左右○
上下も余白はとるが、見た目上効いてないようにみえる。
border
background

displayプロパティを利用すると、ブロックレベル要素をインライン化するなどできます。

以下のようになります。

  • display: block; でブロックレベル化
  • display: inline; でインライン化
  • display: inline-block; でインラインブロック化
よかったらシェアしてね!
目次