【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから

2020年9月2日

main要素にpadding-bottomが効かない?

mainとfooterの間にすき間を空けたいときに、main要素にpadding-bottom:50px;のようにpaddingをつけて一定間隔を保つことがよくありますが、出来上がったと思ってブラウザチェックをかけたらIEで死んでる☠

そう、なぜかIE11ではpadding-bottomが効きませんでした。(padding-topも、いえ、paddingが効きません)

理想

現実(IE11)

IE11でpaddingが効かない理由と解決策

IE11(というかIE9以降)では、main要素のdisplayプロパティはinlineになっています。

Chromeやfirefoxではデフォルトでblockなのですが、IEのためにcss上でdisplay:blockを指定してあげましょう。

参考:http://xn--lcki7of.jp/786/

補足:IE11でmain要素にbackgroundも効かないことがある

paddingと同様に、main要素がdisplay:inlineとして認識されたままだと、backgroundの画像表示なども正常に反映されませんので、やはりmain要素はdisplay:block;としてcss上で指定してあげるようにしましょう。