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}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}input,textarea,select{margin:0;padding:0;font:inherit;color:inherit;border:none;outline:none;box-sizing:border-box}input:focus,textarea:focus,select:focus{outline:none}html{line-height:1.5;-webkit-text-size-adjust:100%;font-size:100%}
</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>
/* ========== Global Reset ========== */
/* Remove default margin, padding, and set box-sizing to border-box for all elements */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== Lists ========== */
/* Remove default indents and bullets from unordered and ordered lists */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ========== Links ========== */
/* Remove default underline and inherit color from parent element */
a {
  text-decoration: none;
  color: inherit;
}

/* ========== Headings and Paragraphs ========== */
/* Zero out margins, padding, and reset font weight */
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

/* ========== Images ========== */
/* Remove gaps below images and make them responsive */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
}

/* ========== Buttons ========== */
/* Remove all default button styles and add pointer cursor */
button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}

/* ========== Forms ========== */
/* Reset default margins, paddings, and styles for form inputs */
input,
textarea,
select {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  box-sizing: border-box;
}

/* Remove focus outline for form elements (add separately if needed) */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* ========== HTML and Body ========== */
/* Ensure consistent line-height, font size, and reset margin/padding */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling on mobile devices */
  font-size: 100%; /* Default is 16px */
}
</style>

‍