HTML 边距和填充异常行为答案

【问题标题】：HTML Margin and padding extrange behaviourHTML 边距和填充异常行为
【发布时间】：2015-03-11 05:14:57
【问题描述】：

嗯，我正在开发一个网页。我想要左边的黑色和右边的内容。这是简单的 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>

这是相应的 CSS 样式表：

html, body {
margin: 0;
    padding: 0;
    height: 100%;
    width: 100%; /*Para ocupar todo el ancho y el alto de la pantalla*/
}


section#content {
    background-image: url("img/crossword.png");
    width: 60%;
    height: 100%;
}


aside#information {
    background-color: black;
    float: left;
    width: 30%;
    height: 100%;
}

问题是，我希望正文填满整个浏览器。所以，如你所见，我使用了这个：

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

但是浏览器顶部还有几个像素，就像this

所以...在网上搜索我找到了下一个代码，使用通用选择器，并将边距和填充属性从 html 和正文中移出，就像这样：

* {
    margin: 0;
    padding: 0;
}

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

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

我希望有人能向我解释这一点。谢谢。

【问题讨论】：

标签： html css margin padding

【解决方案1】：

margin 是由您的 ul 标签引起的，它会将您的 section 向下推。

ul 标签的顶部和底部边距默认为 1em，第二个 CSS 块中的通用选择器正在删除它。

http://jsfiddle.net/bbr716yh/

【讨论】：

非常感谢，马特！我一直在用 Firefox 检查元素，但它欺骗了我，我没有意识到。现在很清楚了。

【解决方案2】：

只需使用 chrome 并右键单击该白色区域，选择检查元素，您应该会看到它是什么。也许是旁边或标题元素...

【讨论】：