HTML边距和填充扩展行为_Html_Css_Margin_Padding

HTML边距和填充扩展行为

html css

HTML边距和填充扩展行为,html,css,margin,padding,Html,Css,Margin,Padding,嗯，我正在做一个网页。我希望左边是黑色，右边是内容。以下是简单的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style/main.css" > <!-- Always force latest IE rendering engine (even in intranet)

嗯，我正在做一个网页。我希望左边是黑色，右边是内容。以下是简单的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style/main.css" >
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>indexhtml</title>
  <meta name="description" content="">
  <meta name="author" content="Lorena Soledad">

  <meta name="viewport" content="width=device-width; initial-scale=1.0">

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

<body>

<aside id="information">
    <header>
        <h1>Web Title</h1>
    </header>

    <footer>
        <p>Description</p>
    </footer>
</aside>

<section id="content">
    <nav>
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </nav>

    <article>
    </article>
</section>

</body>
</html>

问题是，我想让身体填满整个浏览器。如你所见，我用了这个：

html, body {
    margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

但在浏览器顶部仍然有一些像素，就像

所以。。。在web上搜索时，我使用通用选择器找到了下一个代码，并将边距和填充属性移出html和正文，如下所示：

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

这就成功了！我不知道为什么。 Html标记不应该是第一个包含所有内容的标记吗？我的意思是，为什么在html/body标记中定义页边距和填充时它不起作用，而在通用选择器中定义时它却起作用？我不明白

我希望有人能给我解释一下。

谢谢。

页边距

是由您的ul
标签引起的，它将您的部分向下推
ul
标记的默认值为1em
页边距顶部和底部，第二个CSS块中的通用选择器正在删除该值
只要使用chrome并右键单击白色区域，选择inspect elemnt，您就会看到它是什么。也许是旁白或标题元素…非常感谢你，马特！我一直在用Firefox检查元素，但它欺骗了我，我没有意识到。现在清楚了。
* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
}