具有默认边距的浏览器：

Question

有没有办法将单个元素的边距清零？在代码片段中，我通过将html和body的margin设置为0来将margin归零。但是实际上，我只想将表的margin归零，以便其内部内容和html主体的其余部分内容保持“标准”边距。

看看我添加的屏幕截图。

<!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/

内容未扩展/未达到浏览器的完整宽度（标准边距）： 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

单个元素的零缺陷保证金

具有默认边距的浏览器：

HTML扩展默认边距

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

HTML扩展默认边距（代码）：

1 个答案: