About Lesson
Reset Styles Using: * { padding: 0; margin: 0; box-sizing: border-box; }
Why We Use It:
Different browsers apply default margin and padding to elements, which can break consistent layouts. Using a CSS reset ensures all elements start with:
- No margin
- No padding
- Predictable box model
Syntax:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
This rule:
Targets all elements using the universal selector *
Removes default spacing
Makes width/height calculations consistent
*/Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS Reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.box {
width: 300px;
padding: 20px;
border: 5px solid blue;
background-color: lightblue;
margin: 30px auto;
}
</style>
<title>CSS Reset and Box-Sizing</title>
</head>
<body>
<div class="box">
This box is centered and uses global reset + border-box model.
</div>
</body>
</html>