如何为页面主体（html）设置边距？答案

【问题标题】：How to margin the body of the page (html)?如何为页面主体（html）设置边距？
【发布时间】：2011-04-14 23:39:24
【问题描述】：

我用了以下

<body topmargin="0" leftmargin="0" rightmargin="0">

仅适用于 IE6。我希望它可以与 firefox 和 opera 一起使用。

我尝试了以下操作：

<style type="text/css">
.header {
    width: 100%;
    background-color: #3B5998;
    height: 35px;
    margin-top:0;
}
.style1 {
    margin-right: 38px;
}
.style2 {
    width: 100%;
    background-color: #3B5998;
    height: 35px;
}


</style>

<div dir="rtl" class="style2" style="width: 100%">
<p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p>
</div>

</body>

【问题讨论】：

通常你让它在其他所有东西上工作，然后处理 IE6 - 你得到它反过来！
<p> 导致您的问题。尝试将其边距归零也可以看到。并检查 Alex 提供的 collapsing margins 链接作为对他的回答的评论。
@Dampe ：它的工作原理谢谢 Dampe

标签： html css

【解决方案1】：

首先你可以使用：

<body style="margin:0;padding:0">

一旦你学了一点css，你就可以把它改成：

body {margin:0;padding:0}

在您的样式表中。

【讨论】：

@Buffon：然后它导致了另一个元素。我猜你有 h1 或任何其他标题作为第一个元素。因此，也将该元素的边距设为空或提供您的代码。
代码是：<style type="text/css"> .header { width: 100%; background-color: #3B5998; height: 35px; margin-top:0; } .style1 { margin-right: 38px; } .style2 { width: 100%; background-color: #3B5998; height: 35px; } </style> </head> <body style="margin: 0;"> <div dir="rtl" class="style2" style="width: 100%"> <p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p> </div> . </body>
添加边距：0；到那个段落元素。
@Damb：这些值应该总是后面有“px”。
@Nyerguds 你能链接一个这样说的页面吗？据我所知，您不应该将单位定义为零。

【解决方案2】：

是的，CSS 入门不会在这里受到伤害，因此您可以做两件事： 1 - 在您的 html 的标签中，您可以打开这样的样式标签：

<style type="text/css">
  body {
   margin: 0px;
  }
  /*
   * this is the same as writing
   * body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
   * I'm adding px here for clarity sake but the unit is not really needed if you have 0
   * look into em, pt and % for other unit types 
   * the rules are always clockwise: top, right, bottom, left
  */
</style>

2- 虽然上述内容仅适用于您嵌入了此代码的页面，因此如果您想在 10 个文件中重复使用它，那么您必须将其复制到所有 10 个文件中，如果您想进行更改，假设有 5px 的边距，您必须打开所有这些文件并进行编辑。这就是为什么使用外部样式表是前端编码的黄金法则。因此，例如将正文声明保存在名为 style.css 的单独文件中，然后将其添加到 html 中：

<link rel="stylesheet" type="text/css" href="style.css"/>

现在，您可以将其放在将从这些样式中受益的所有页面中，并且在需要更改它们时，您只需在一个位置进行更改。希望能帮助到你。干杯

【讨论】：

【解决方案3】：

HTML 表示内容，CSS 表示样式

<body style='margin-top:0;margin-left:0;margin-right:0;'>

【讨论】：

【解决方案4】：

我希望这会有所帮助.. 如果我理解了这个问题

html{
     background-color:green;
}

body {
    position:relative; 
    left:200px;    
    background-color:red;
}
div{
    position:relative;  
    left:100px;
    width:100px;
    height:100px;
    background-color:blue;
}

http://jsfiddle.net/6M6ZQ/

【讨论】：

【解决方案5】：

<body topmargin="0" leftmargin="0" rightmargin="0">

我不确定你是从哪里读到的，但这是公认的内联 CSS 样式设置方式：

<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">

还有一个样式表：

body
{
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

【讨论】：

这个解决方案对 android webview 有帮助

【解决方案6】：

您需要使用 css。这就是现代网页设计完成工作的方式。

这是一个基本的css 演练。

你的 html 文件应该是这样的：

（非常简单的html）

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    <body>
    </body>
    <html>

您的 css 文件 (mystyle.css) 如下所示：

body 
{
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;

}

【讨论】：

我用过body { margin-top=0px; margin-left=0px; margin-right=0px; }
@Buffon 这对大部分网站来说并不是没用的。
布冯，这是唯一的出路。
您可以在受控环境中将一些彩色矩形与文本对齐，拍照，然后将其用作网站；)
@Buffon，我更新了我的答案，向你展示了如何做到这一点。

【解决方案7】：

尝试使用CSS。

body {
   margin: 0 0 auto 0;
}

顺序是从上到下顺时针，所以top right bottom left。

【讨论】：

lol :D .. 我已经知道 css alex 并且我尝试了你的代码，它在左右两边都很好，但在 top 中不起作用
怎么不工作了？更具体一点（我必须为此记录宏）。
@Buffon 你知道collapsing margins吗？

【解决方案8】：

我会说：（简单的零可以工作，0px 是零；））

<body style="margin: 0;">

但也许有些东西会覆盖你的 CSS。（在你之后分配不同的样式；））

如果您使用 Firefox - 请查看 firebug 插件。

在 Chrome 中 - 只需右键单击页面并在菜单中选择 “检查元素”。在元素树中找到 BODY 并检查其属性。

【讨论】：