如何摆脱 HTML 内容周围的边距？答案

【问题标题】：How can I get rid of margin around my HTML content?如何摆脱 HTML 内容周围的边距？
【发布时间】：2014-07-27 18:09:23
【问题描述】：

以下 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>

但是，我的 div 和浏览器窗口的左上边缘之间有大约 10 像素的空间。有没有办法摆脱它，使 div 被“粘”到浏览器窗口？

【问题讨论】：

标签： html

【解决方案1】：

您可以将 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>

或者您可以将 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>

所有浏览器在窗口的顶部和左侧边缘都有默认边距。您的页面没有任何问题。您只需要告诉浏览器删除默认边距即可。

【讨论】：

【解决方案2】：

要单独保留其他元素的内边距和外边距，只需重置正文即可。

body { padding: 0; margin: 0; }

【讨论】：

【解决方案3】：

使用 CSS 重置。

<style type="text/css">* { padding: 0; margin: 0; }</style>

【讨论】：

【解决方案4】：

尝试为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>

【讨论】：

【解决方案5】：

如果您执行上述任何代码，但您没有将表格属性设置为百分比而不是像素，您最终可能仍会在页面周围出现一个边距类型的空间。就像在底部滚动条中仍然会显示一样。

<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>

【讨论】：