html - 如何完全删除右边距？ [复制]答案

【问题标题】：html - how to remove right margin completely? [duplicate]html - 如何完全删除右边距？ [复制]
【发布时间】：2014-06-05 20:31:24
【问题描述】：

我希望下图中的黑色矩形完全适合窗口；

我设置margin-left:-8px; 完全去除左边距；但是右边距呢？（更改margin-right 没有那种效果）我怎样才能将它也删除，以便深色矩形接触边框？

我的代码：

<html>
<head>
<body>
<span style="margin-left:-8px; display:inline-block; width:100%; background:#2F4F4F";><font face="Georgia" size="3" color="#FFFFFF">hello world!</font></span>
</body>
</head>
</html>

【问题讨论】：

如果你想要一个全宽的块，我建议使用<div> 而不是<span>，这在语义上更正确。另外，请避免使用内联样式和样式标签 - Why Use CSS

标签： html css

【解决方案1】：

您可能想要删除 html/body 元素上的填充/边距：

body, html { margin:0; padding:0; }

【讨论】：

优秀；谢谢;但是，如果我希望您的设置仅应用于深色矩形而其他元素具有默认边距怎么办？
您只是删除了 body/html 元素的默认边距，而不是其他元素的默认边距。如果您真的希望所有其他元素具有默认的左/右边距，则需要将其显式添加到它们 - 或者，您可以将主体上的左/右边距设置为，例如 10px，然后应用负左/深色矩形上的右边距为 -10px。
如果你想保持默认边距，那么 width:calc(100% + 16px) 是一个解决方案jsfiddle.net/PgYw5

【解决方案2】：

你试过了吗：

body {
padding: 0;
margin: 0;
}

【讨论】：

【解决方案3】：

添加这个：

html, body{
    margin: 0;
}

Fiddle

【讨论】：

非常专业的回答+1
优秀；谢谢;但是，如果我希望您的设置仅应用于深色矩形而其他元素具有默认边距怎么办？
@wiki 不，这将删除整个页面的边距！

【解决方案4】：

body 元素默认有 8px 的边距。删除它。

body {
  margin:0;
}

【讨论】：

@Max - 是的，你是对的 - 8px - 我编辑了这个，谢谢。