Zero out the margins and padding

[AnnaxT]

Hi everyone,

I often come across this famous idea to reset margin and padding at the beginning of the CSS file. This is recommended in many tutorials, but also I’ve heard many developers advising against it.

* {
 margin: 0;
 padding: 0;
}

So anyone experienced could tell me if this is actually best practice or bad practice?

Thank you!

[lasjorg]

Personally, I don’t find it all that useful. If you are going to define your own margin and padding on the elements you will be overwriting the defaults anyway. Sometimes for tiny isolated stuff, like a Codepen with just one component, it might be fine to just remove all margin and padding.

Also, having some defaults to fall back on in case your CSS doesn’t get applied (for whatever reason) isn’t a bad idea.

[jsdisco]

Whether it’s best practice or not depends on who you ask… I’d call it neither best nor bad practice. I’d absolutely recommend to add this though:

* {
  box-sizing:border-box;
}

While I was still learning CSS, adding the padding/margin reset helped a lot to make me aware of which elements get default spacing styles from a browser. I still add the reset out of habit nowadays, but I’m in the process of realising that whenever I manually add a margin/padding, I could as well have left the browser default. There are good reasons that browsers add that default because for some elements like <p> and <h1> it just makes sense. For others, I’d always remove/customise it, like <ul> and <figure>.