Question

任何人都可以解释容器的行为吗？没有边框会出现顶部的间隔（这是什么？主体或html的填充？内部容器的边距？）并且没有带边框的间隔。

＆＃13;

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: #999;
}
#wrap {
  background: #eee;
  margin: 0 auto;
  /*border:1px solid red;*//*On/Off uncomment*/
}

＆＃13;

<body>
  <div id="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</body>

＆＃13;

Answer 1

<p>默认有余量。如果您希望将容器连接到顶部，则必须使用以下CSS将其删除：

p { margin:0; }

或者，如果您想保留<p>的边距但在容器内，则必须使用以下CSS规则：

#wrap { overflow:hidden; }

Answer 2

此保证金是因为您在<p>元素上的保证金最高限额。在<body>中包含此空间的简单解决方案是使用填充而不是边距：

p {
  margin: 0;
  padding: 16px 0;
}

Answer 3

覆盖<p>元素边距

＆＃13;

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: #999;
}
#wrap {
  background: #eee;
  margin: 0 auto;
  /*border:1px solid red;*//*On/Off uncomment*/
}

#wrap p{
 margin: 0;
}

＆＃13;

<body>
  <div id="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</body>

＆＃13;

CSS容器位置

3 个答案: