如何摆脱 HTML 内容周围的边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8458383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get rid of margin around my HTML content?
提问by user380719
The following HTML display fine.
以下 HTML 显示正常。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
However, there is a space of around 10 pixel between the left and top edges my div and the browser window. Is there a way to get rid of it so that the div is "glued" to the browser window?
但是，我的 div 和浏览器窗口的左边缘和上边缘之间有大约 10 像素的空间。有没有办法摆脱它，以便div“粘”到浏览器窗口？
回答by Scott
You could add CSS to the document....
您可以将 CSS 添加到文档中....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
Or you could add the CSS as an inline style
或者您可以将 CSS 添加为内联样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body style="margin:0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
All browsers have a default margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.
所有浏览器在窗口的顶部和左侧边缘都有一个默认的边距。你的页面没有问题。您只需要告诉浏览器删除默认边距。
回答by Steven Hymanson
To leave the padding and margins of other elements alone, just reset the body.
要单独保留其他元素的填充和边距，只需重置主体即可。
body { padding: 0; margin: 0; }
回答by EmCo
Try adding style to the bodytag, like this:
尝试向body标签添加样式，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> </head> <body style="margin: 0;"> <div style="width: 100px; height: 100px; background: red;"> <div>Hello</div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> </head> <body style="margin: 0;"> <div style="width: 100px; height: 100px; background: red;"> <div>Hello</div> </div> </body> </html>
回答by Madara's Ghost
Use a CSS reset.
使用 CSS 重置。
<style type="text/css">* { padding: 0; margin: 0; }</style>
回答by Claudia Thompson
If you do any of the above codes, but you do not set your table properties to percent rather than pixels, you will probably still end up with a margin-type space around your page. Like as in the bottom scroll bar will still show.
如果您执行上述任何代码，但您没有将表格属性设置为百分比而不是像素，您可能仍会在页面周围留下边距类型的空间。就像在底部滚动条一样仍然会显示。
<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td width="15%" align="left" valign="top" bgcolor="#B8B8B6">
</td>
<td width="85%" bgcolor="#FFFFFF" align="left" valign="top">
</td>
</table>
