单元素归零边距

Question

有什么方法可以将单个元素的边距归零吗？在代码片段中，我通过将 html 和主体边距设置为 0 来将边距归零。但实际上我只想将 table 的边距归零，以便其内部内容和其余 html 正文内容保持 'standard' 边距。

看看我添加的屏幕截图。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <style>
      html, body {
 margin: 0;
 padding: 0;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
  background-color: #000;
  width: 100%;
}
</style>
    <title>Zero-out margin of single elements</title>
  </head>

  <body>
  <p>This text should've its standard margin</p>
    <table>
    <td>
    <p style="color: white">This text should've its standard margin. Only the table should extend the browser width.</p>
    </td>     
    </table>
    <hr>
    <p>This hr should've its standard margin too</p>
  </body>

</html>

看看这个可以更好地理解我的意思：https://meyerweb.com/eric/tools/css/reset/

内容扩展/达到整个浏览器宽度：https://jsfiddle.net/48qeuanf/1/

内容不是 extending/reaching 全浏览器宽度（标准边距）： https://jsfiddle.net/48qeuanf/2/

具有默认边距的浏览器：

Html 扩展默认保证金

具有默认边距的浏览器（代码）]：

Html 扩展默认保证金（代码）：

Answer 1

将您的 CSS 更改为：

     body
{
  margin:0
}
body > *
{
  margin:3px;
  background-color: #FF0000;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
  background-color: black;
  width: 100%;
  margin : initial
  }
  td > p
  {
    margin:2px;
  }

initial 关键字用于将 CSS 属性设置为其默认值。 element > * 选择器选择该元素的所有子元素

勾选fiddle

单元素归零边距

Zero-out margin of single elements

html

css

html-table

margin

具有默认边距的浏览器：

Html 扩展默认保证金

具有默认边距的浏览器（代码）]：

Html 扩展默认保证金（代码）：