Question

我有index.html，如下所示： -

＆＃13;

    html {
        background-color: #0000FF;
    }
    body{
        background-color: #FF0000;
    }

＆＃13;

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
        <link href="styles/style.css" rel="stylesheet" type="text/css">
      </head>
      <body>
        <h1>Mozilla is cool</h1>
        <img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
        <div style="height: 100px; width: 100px;"></div>
        <p>At Mozilla, we’re a global community of</p>
    
        <ul> <!-- changed to list in the tutorial -->
          <li>technologists</li>
          <li>thinkers</li>
          <li>builders</li>
        </ul>
    
        <p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
    
        <p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
      </body>
    </html>

＆＃13;

最初，h1的边距与窗口有关，并且在body元素上方有一些额外的空间。但是如果我添加border：1px solid black到我的body元素，h1的边距是body元素。

为什么会这样？身体元素的边界甚至在之前就存在了，但我们不仅仅是正确显示它了吗？

Answer 1

您可以使用box-sizing: border-box;

Answer 2

许多浏览器都有一个默认的用户代理样式表，可自动添加一些样式 - 即使您没有指定任何样式。

例如，在chrome中，我可以看到h1将被给予一个小的margin-before和margin-end，这将给你身体和H1之间的差距。

您可以使用多个重置样式表之一example here

覆盖此默认样式表

用户代理样式表将按以下顺序由任何其他样式覆盖：

浏览器/用户默认
外部
内部（标签内）
内联（在HTML中元件）

它可能值得阅读css specificity，因为它解释了您可能遇到的许多简单问题

h1标签边缘的行为

2 个答案: