CSS displayの初期値・デフォルト(ブラウザでの初期値)

displayは様々な値があり、初期値がわからないものです。

また、ブラウザ側でhtmlタグごとにdisplayの初期値が設定されており、dispalyの値を元に戻したいとき、意外とわかりません。

CSS displayの初期値・デフォルトを解説します。

CSS displayの初期値はinline

displayの初期値はinlineです。

「initial」というデフォルトに戻すCSSの値があります。

displayにおいてinitialを指定するとhtmlタグに関わらず すべてinline要素になります。

ブラウザでのdisplay初期値一覧

ブラウザではhtmlタグごとにCSSの値が初期設定されています。

下記はよく使うhtmlタグのブラウザでのdisplay初期値一覧です。

display	htmlタグ
block	div,p,h1,h2,h3,h4,h5,h6,ul,ol,form,option,main,header,footer,section,nav,article,aside,body,html
inline	a,span,img,iframe,video,label,br
inline-block	input,textarea,select
list-item	li
table	table
table-row-group	tbody
table-row	tr
table-cell	td,th
none	head,style,script,meta,title,link

displayの値について詳しくはこちら↓

ul,olはblock、liはlist-item

ul,olはblockですが、liはlist-itemという値です。特徴はblockに似ていますが気を付けましょう。

mainはIEではinline

mainタグは普通blockですが、IEではinlineになっています。

mainタグを使うときは「display:block」を指定しましょう。

【まとめ】displayの初期値

• CSS displayの初期値はinline
• ブラウザではhtmlタグごとにCSSの値が初期設定されている

以上、CSS displayの初期値・デフォルトでした。