Reset All Margin and Padding Values in CSS




Web browsers like Google Chrome and Mozilla Firefox apply a few default CSS styles to every HTML element. These are called user agent stylesheets.

Typically, the user agent stylesheets apply paddings and margins to ensure that elements have proper spacing and formatting in the absence of custom CSS rules.

For example, Microsoft Edge uses a default value of 8px margin on the body selector.

Developers override these default browser styles via user-defined CSS stylesheets to achieve a consistent look on all browsers and devices.

In this short bonus article, you'll learn how to fully reset CSS margins and paddings in your website or web application.

Reset All Margin and Padding Values in CSS

Reset CSS Padding and Margin of the Document Body

To reset the margins and padding on the HTML body element, open your website's global CSS file and add the following properties to the body selector.

body {
  margin: 0;
  padding: 0;

This code snippet sets all four margin and padding properties (top, right, bottom, and left) to zero (0). Now, pesky whitespaces around the direct children of the body element won't throw off your website's layout anymore.

W3Things website with default body margin value.
W3Things website with default body margin value.
View Original Image Size

Here's a practical demonstration for you.

In the screenshot above, I've removed the margin: 0; property from the body tag of this blog's home page. Notice the whitespaces above the navigation bar? That's what the browser applies to every webpage by default unless overridden.

The Universal Selector CSS Reset Method

To reset the margins and padding of the entire website, use the global/Universal CSS selector (*) like the following.

* {
  margin: 0;
  padding: 0;

This way, you remove browser-applied margins and paddings from every single element (E.g., <ul>, <li>, <figure>, <blockquote>, etc.)

Also, use the box-sizing: border-box; property in the global selector to ensure the browser includes the paddings and borders in the total width and height of the elements.

Wrapping Up

And that's it! Now you know the basics of how to reset CSS margins and paddings. I hope you found this short article helpful.

But in case you're curious to learn more about CSS margins and paddings, check out my CSS Margin vs Padding vs Gap - The Ultimate Guide.


    Danial Zahid's headshot.

    About Danial Zahid

    I'm a self-taught web developer passionate about everything related to websites and web development. Over the past years, I've explored and worked with different web technologies and tools, notably WordPress, Eleventy, npm, and Gulp.js, to name a few.

    In addition, I've created and currently maintain several open-source projects, including web apps, widgets, websites, and more.

    When I'm not writing content for W3Things or doing web development work, I enjoy my free time by playing games or listening to podcasts.

    Get Essential Gulp Kit

    The ultimate Gulp.js solution to improve your developer experience.

    • Includes complete Gulp.js toolkit setup
    • Optimize website content and static assets
    • Continuous asset optimization during development phase
    • Optimize unlimited number of files in bulk
    • Plus many more awesome features

    Subscribe to the Newsletter

    This website uses cookies to optimize your site experience. By continuing to use the site, you are agreeing to its privacy policy and the use of cookies.