logo标签列表

如何设置页面主体的边距（HTML）？

htmlcss
35
我使用了以下代码。
<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>
2
通常情况下，你会先让它在其他所有浏览器上正常工作，然后再解决IE6的问题 - 但你却反其道而行之！ - Billy Moon
<p> 标签可能是引起问题的原因。尝试将其边距设为零并查看 Alex 在他的回答评论中提供的 collapsing margins 链接。 - Damb
9个回答
61

首先，您可以使用：

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

一旦你学习了一些CSS，你就可以将其更改为：

body {margin:0;padding:0}

在你的样式表中。

@Buffon：那么它导致了另一个元素。我猜你将h1或其他标题作为第一个元素。因此，也要将该元素的边距设置为空或者提供你的代码。 - Damb
代码如下：<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> - Buffon
将margin:0; 添加到该段落元素。 - Damb
2
@Nyerguds，您能否提供一个证明这一点的页面链接？据我所知，您不应该为零定义单位。 - Damb
哦，真的吗？奇怪。看起来总是需要一个单位才有意义。那么，零就是一个特殊情况了？ - Nyerguds
3

内容使用Html，样式使用CSS

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

嗯，这里可能需要一份CSS入门教程，这样你可以做两件事情： 1 - 在你的HTML代码中``标签内部，你可以打开一个style标签，像这样：

<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，您必须打开所有这些文件并进行编辑。这就是为什么在前端编码中使用外部样式表是一个黄金法则。因此，将body声明保存在名为style.css的单独文件中，然后从您的html中添加以下内容：

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

现在您可以将这些样式放在所有需要受益的页面的标签中，每当需要更改时，您只需要在一个地方进行更改。希望这有所帮助。干杯。
2
我希望这样能有所帮助。如果我理解了问题。
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/

1
你需要使用 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 对于大部分网站来说，这并不是无用的。 - alex
布冯，这真的是唯一的方法。 - k to the z
你可以在一个受控环境中对一些带有文本的彩色矩形进行对齐，拍照后将其用作网站的背景图像。 - Blender
@Buffon，我更新了我的答案，向您展示了如何准确地完成它。 - k to the z
1

尝试使用CSS。

body {
   margin: 0 0 auto 0;
}

顺序是从顶部开始顺时针方向，因此为上 右 下 左。

哈哈 :D .. 我已经知道 CSS 了，Alex。我尝试了你的代码，在左右方面很好，但在“顶部”方面不起作用。 - Buffon
它为什么不工作？请再具体一些（我必须为此记录宏）。 - Blender
2
@Buffon 你是否了解折叠边距？ - alex
1
<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。 - Siarhei
0
the body element have below styles by default
     body {
          display: block;
          margin: 8px;
        }
     body: focus {
          outline: none;
        }

we can override this using
1. inline styles       

    <body style="margin: 0;">

2. internal styling

        <style>
    body {
    margin: 0;
    }
    </style>
点击这里查看： 应该能找到你所寻求的答案。 https://dev59.com/zVDTa4cB1Zd3GeqPIl5T - dustbuster
0
我会说：（简单的零就可以了，0像素就是零；）
<body style="margin: 0;">

但可能有些东西覆盖了你的CSS。（在你之后分配不同的样式）

如果您使用Firefox，请查看Firebug插件。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接