Normalize vs Reset CSS

• Chrome
• Firefox
• Safari

1. Resetting CSS, as the name suggests, will reset all the built-in styles.
   The most popular CSS reset library is Meyer's reset.css which you can see the complete code here. For example, it resets the `margin` for `body` to 0:
   css

   body {
       margin: 0;
   }

   If you use the Developer Tool of Chrome browser, and inspect the body element of any web page, you will see that it has the margin of 8px by default which we often don't want to have at all:
   css

   body {
       margin: 8px;
   }

2. Normalizing CSS is another alternative to resetting CSS.
   The most popular library in this area is normalize.css. It tries to make built-in browser styling consistent across browsers.
   More than that, the library also:
   • Makes some elements look like what we expect.
   For example, the Chrome, Firefox and Safari browsers use the following styles for the `sub` and `sup` tags:
   css

   sub {
       vertical-align: sub;
       font-size: smaller;
   }
   sup {
       vertical-align: super;
       font-size: smaller;
   }

   It's not easy for us to distinguish these tags with normal one visually. normalize.css improves by declaring the position for these tags:
   css

   sub {
       bottom: -0.25em;
   }
   sup {
       top: -0.5em;
   }

   • Fix display bugs across browsers.
   You can look at its source code to see there are lot of bug fixes for different browsers such as Internet Explorer, Edge, Firefox, etc.

• Bootstrap's reboot
• Tachyons
• Tailwindcss

#Resources

1. water.css adds more visual styles for common tags
2. minireset is another tiny modern CSS reset
3. This website allows us to get the default styles of various rendering engines for particular element