我怎样才能去掉HTML内容周围的空白?

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被“粘在”浏览器窗口上?

5 个解决方案

#1

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.

所有的浏览器在窗口的顶部和左边都有一个默认的边缘。你的页面没有问题。你只需要告诉浏览器删除默认的边距。

#2

To leave the padding and margins of other elements alone, just reset the body.

要保留其他元素的填充和边距，只需重置主体。

body { padding: 0; margin: 0; }

#3

Try adding style to the body tag, 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>

#4

Use a CSS reset.

使用CSS重置。

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

#5

-1

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>

#1