Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How wide is the default margin?
The default body margin in HTML is 8px on all sides. This margin is applied by the browser's user-agent stylesheet, creating a small space between the page content and the viewport edges. Understanding and controlling this default margin is essential for creating precise web layouts.
Default Margin in HTML
All modern browsers apply a default margin of 8px to the <body> element. This prevents content from touching the browser window edges, providing better readability. The margin appears as white space around your content.
Example Default 8px Margin
Following example shows how the default margin creates space around the content
<!DOCTYPE html>
<html>
<head>
<title>Default Margin Example</title>
<style>
body {
background: orange;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Free Resources</h1>
<p>We have the following resources for the users:</p>
<div id="container">
<ul>
<li>Video Courses</li>
<li>Notes</li>
<li>Interview QA</li>
<li>MCQs</li>
</ul>
</div>
</body>
</html>
The output shows the orange background with 8px of white margin space around all edges
[8px white margin visible around orange background containing:] Free Resources We have the following resources for the users: ? Video Courses ? Notes ? Interview QA ? MCQs
Changing the Default Margin
You can override the default margin using CSS. Common approaches include setting a specific margin value, removing it entirely with margin: 0, or applying different margins to each side.
Example Custom Margin
Following example changes the default 8px margin to 25px
<!DOCTYPE html>
<html>
<head>
<title>Custom Margin Example</title>
<style>
body {
background: orange;
margin: 25px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Free Resources</h1>
<p>We have the following resources for the users:</p>
<div id="container">
<ul>
<li>Video Courses</li>
<li>Notes</li>
<li>Interview QA</li>
<li>MCQs</li>
</ul>
</div>
</body>
</html>
The output shows increased white margin space (25px) around the orange background
[25px white margin visible around orange background - noticeably larger than default] Free Resources We have the following resources for the users: ? Video Courses ? Notes ? Interview QA ? MCQs
Example Removing Default Margin
Following example removes the default margin completely
<!DOCTYPE html>
<html>
<head>
<title>Zero Margin Example</title>
<style>
body {
background: lightblue;
margin: 0;
padding: 10px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Full Width Layout</h1>
<p>This content extends to the browser edges with zero margin.</p>
</body>
</html>
The output shows the background extending to the browser edges with no margin
[Light blue background extends to all edges with no white margin] Full Width Layout This content extends to the browser edges with zero margin.
CSS Reset and Normalize
Many developers use CSS reset or normalize stylesheets to create consistent styling across browsers. A common approach is setting margin: 0; padding: 0; on all elements using the universal selector.
Example CSS Reset for Body
<!DOCTYPE html>
<html>
<head>
<title>CSS Reset Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
padding: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Reset Stylesheet Applied</h1>
<p>All default margins and padding removed, then custom spacing applied.</p>
</body>
</html>
The reset removes all default margins and padding, allowing precise control over spacing
[Gradient background extends to edges, with custom 20px padding] Reset Stylesheet Applied All default margins and padding removed, then custom spacing applied.
Browser Compatibility
The 8px default margin is consistent across modern browsers including Chrome, Firefox, Safari, and Edge. Older versions of Internet Explorer may have slight variations, but the 8px standard is widely supported.
| Browser | Default Body Margin |
|---|---|
| Chrome | 8px |
| Firefox | 8px |
| Safari | 8px |
| Edge | 8px |
| Internet Explorer 11 | 8px |
Conclusion
The default body margin in HTML is 8px on all sides, applied by the browser's user-agent stylesheet. You can easily override this using CSS with properties like margin: 0 for full-width layouts or margin: 25px for increased spacing. Understanding this default behavior helps create consistent and predictable web layouts.
3K+ Views
