<main> element doesn't show padding in Opera, Safari, IE

Question

I have the html5 element in my project and given it a padding. Firefox and Chrome show the padding correctly, but unfortunately Opera, Safari and IE don't.

Do you have any experience with this issue and know how to solve it?

It is not happening due to my reset.css, and I was able to reproduce the error in a simple fiddle. Just check it in the named browsers to see the difference.

FIDDLE

And here is the example code.

HTML:

<section class="wrapper">gets padding everywhere</section>
<main class="wrapper">gets no padding in the mentioned Browsers</main>
<section class="wrapper">gets padding everywhere</section>

CSS:

.wrapper {
    padding: 8em 0;
}

Thank you!

Shilling

Yes sorry, this was just a copy/paste error from some try outs I made. The original is without px, I corrected it in my question. Thx! – Shilling

Very odd - jsfiddle.net/LDy2h/1 - I added 1px border on your Fiddle, there's some strange stuff going on in Safari/IE11/Opera. Edit - ah, as mentioned below, some browsers don't treat it as a block level element. main { display:block } will fix this. – Hisakohisbe

@Nick R: Uh yes, this looks very strange indeed! – Shilling

The <main> element was a late addition to HTML5 (it was only added to the spec in the middle of 2013), so not all browsers will support it. You need to provide it with a default CSS stylesheet of {display:block;}. – Anoxia

Answer 1

It looks like IE, Opera etc don't treat the <main> tag as display block. I added css to force it and it worked in all the browsers you talked about here

main.wrapper{
    display: block;
}

Case

you could also just use main instead of main.wrapper FYI – Case

Ah, of course! I should have thought of this myself.. :) Thank you very much!! – Shilling

Couldn't get it to play nice in FF 37.0.2 on Mac with abbreviated forms of padding - padding: 60px auto;. Had to use verbose form: padding-top: 60px; padding-right: auto; padding-bottom: 60px; padding-left: auto; – Burglar