By default, Webflow applies some basic styles to certain elements, such as margins, paddings, and font sizes. Here are a few examples:

• Body: Has default margins and base font settings.
• Headings (H1–H6): Come with predefined font sizes and bottom margins margin-bottom.
• Paragraphs (P): Typically have amargin-bottomby default.
• Containers: Have a fixed width and are automatically centered.
• Images: Usemax-width:100% to stay within their container.

These default styles are part of Webflow's built-in CSS. However, if you want to remove all default styles and start from a clean slate, you can use the following CSS Reset code:

1. Add an Embed element to your page.
2. Insert this code:

‍

<style>*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}ul,ol{list-style:none;padding:0;margin:0}a{text-decoration:none;color:inherit}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}img{display:block;max-width:100%;height:auto;border:none}button{all:unset;box-sizing:border-box;cursor:pointer;background:none}input,textarea,select{margin:0;padding:0;font:inherit;color:inherit;border:none;outline:none;box-sizing:border-box;background:none}input:focus,textarea:focus,select:focus{outline:none}</style>

3. Save and publish your changes.

‍

What This Does:

This CSS removes all default margins, paddings, and other basic properties applied by Webflow. Your elements will now behave consistently, and you can define your own styles from scratch.

‍

CSS Reset with Detailed Comments

Below is a detailed version of the CSS Reset. Each section includes comments explaining what it does:

‍

<style>
*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
ul,ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
h1,h2,h3,h4,h5,h6,p {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
}
button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  background: none;
}
input,textarea,select {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  box-sizing: border-box;
  background: none;
}
input:focus,textarea:focus,select:focus {
  outline: none;
}
</style>

‍