Yesterday, I noticed that my background color was not covering the full width.
At first, I was checking the width, padding, margin, and even thinking about adding a border.
Normally, we can use the universal selector * for the basic CSS reset.
In my particular case, I noticed the problem and fixed the body specifically.
So readers should understand both approaches, instead of thinking body { margin: 0; } is the only correct method.
Then I realized the actual problem was the browser's default margin on the body.
In my case
I fixed it by adding:
html,
body {
margin: 0;
padding: 0;
}
After that, my background color covered the full width.
But normally...When starting a new HTML/CSS project, I usually prefer to set the basic reset using the universal selector:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This resets the default margin and padding for all elements.
So, my case was specifically about the body margin, but as a general project setup, you can use the universal selector to reset the default spacing.
when the real problem is just 8px of default body margin
Top comments (0)