block, inline, inline-blockの違い

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

block, inline, inline-block

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

項目 ブロックレベル要素 インライン要素 インラインブロック要素
要素 p, div, table, form, fieldset, address, blockquote, h1~h6, hr, pre, dl, ul, olなど a, em, label, span, strongなど img, input, select, textareaなど
改行 改行される 改行されない 改行されない
width ×
height ×
margin 左右○ 上下×
padding 左右○
上下も余白はとるが、見た目上効いてないようにみえる。
border
background

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

display: block; でブロックレベル化、
display: inline; でインライン化、
display: inline-block; でインラインブロック化
となります。

わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。

HTML/CSSに関連する書籍 (Amazon)