ホーム(記事一覧)へ

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

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

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

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

CSS displayの初期値はinline

displayの初期値はinlineです。

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

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

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

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

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

displayhtmlタグ
blockdiv,p,h1,h2,h3,h4,h5,h6,ul,ol,form,option,main,header,footer,section,nav,article,aside,body,html
inlinea,span,img,iframe,video,label,br
inline-blockinput,textarea,select
list-itemli
tabletable
table-row-grouptbody
table-rowtr
table-celltd,th
nonehead,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の初期値・デフォルトでした。

関連記事