「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;でインラインブロック化
