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

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

mainとfooterの間にすき間を空けたいときによくやること。

main要素にpadding-bottom:50px;のようにpaddingをつけて一定間隔を保つこと。

出来上がったと思ってブラウザチェックをかけたらIEで死んでる

なぜかIE11ではpadding-bottomが効きませんでした。

理想

現実(IE11)

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

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

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

 

参考

IE では main 要素の display は inline なので注意する