Browsers have changed a bit these days and the arguments for not removing padding and margins are not quite the same as they were. You may lose some visual clues such as the depress effect on submit buttons but you can replace this with other focus styles. I find it better to explicitly control the padding, margin and line-height on form elements these days for better results and I also use the border-box model for IE8 plus so that textareas and selects are the same widths as inputs.
Whatever method you use there will always be a discrepancy so it's a matter of being careful and checking the results
Kudos for the main in the code
Question on flexbox: if using flexbox and browsers don't know elements like <main> and <footer>, does flexbox just create their block-context or do you actually still have to display: block them for someone?
I usually set them to block in the default reset although modern browsers should know about them now (maybe not 'main' yet though) so yes if you had no 'reset' styles then the element should be set to block just in case when using flex.
@Paul O'B would you mind explaining how the flex-box example works? That is amazing stuff.
I'm just getting my head around it also but the basis of the demo was that the 100vh sets the element to 100% of the viewport height and the flex-direction: column; sets the child boxes to be stacked vertically rather than horizontally.
The flex:1 on two of the children says that you want the space ratio that they occupy to be the same so the rest of the space in that element is evenly divided between those two items. If one was flex 2 then it would have twice the space as the other one and so on. The item without the flex1 just takes up its own space as required.
It makes the sticky footer pretty easy as you can do the same sort of thing.
Some demos here:
The main problem is browsers support so it will be a couple of years before we can go mainstream with it without a fall-back.