元素下方有额外空间<div>

Question

div之后有一些额外的空间，带有id" header"元素（第二个div）。如果我删除P，则DIV元素之间没有空间。如何在不删除P元素的情况下杀死两个DIV元素之间的空间，以及为什么会像它一样行事？

body {
  margin: 0px;
  padding: 0px;
}
div#page {
  width: 960px;
  margin: 10px auto;
}
div#header {
  width: 960px;
  height: 80px;
  background-color: lightgray;
}
div#main {
  height: 400px;
  width: 960px;
  background-color: antiquewhite;
}

<div id="page">
  <div id="header">header</div>
  <div id="main">
    <p>we make your business</p>
    <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
    <form action="" method="post">
      <button>about us</button>
    </form>
  </div>
</div>

Answer 1

这是因为保证金崩溃：

父母和第一个/最后一个孩子
如果没有边框，填充，内联内容，block_formatting_context创建或 clearance 可以将块的保证金顶部与其第一个子块的边距分开，或者没有边框，填充，内联内容，高度，最小值或最大高度，将一个街区的边缘底部与最后一个孩子的边缘底部分开，然后这些边缘崩溃了。折叠的边距最终在父母之外。

您可以从第一个<p>元素中删除margin-top，然后将padding-top改为 div#main：

body {
  margin: 0px;
  padding: 0px;
}
div#page {
  width: 960px;
  margin: 10px auto;
}
div#header {
  width: 960px;
  height: 80px;
  background-color: lightgray;
}
div#main {
  height: 400px;
  width: 960px;
  background-color: antiquewhite;
  padding-top: 15px;
}
div#main p:first-child {
  margin-top: 0;
}

<div id="page">
  <div id="header">header</div>
  <div id="main">
    <p>we make your business</p>
    <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
    <form action="" method="post">
      <button>about us</button>
    </form>
  </div>
</div>

Answer 2

如果删除这两个div之间的空间，则添加此CSS： -

#main p:first-child {
    margin: 0px;
}

Answer 3

只是在身体元素

方面使用 *

*{
    margin:0px;
    padding:0px;
}
div#page{
    width:960px;
    margin:10px auto;
}
div#header{
    width:960px;
    height:80px;
    background-color:lightgray;
}
div#main{
    height:400px;
    width:960px;
    background-color:antiquewhite;
}

<div id="page">
        <div id="header">
           header
        </div>
        <div id="main">
            <p>we make your business</p>
            <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
            <form action="" method="post">
                <button>
                    about us
                </button>
            </form>
        </div>
</div>

Answer 4

请尝试此

<!-- language: lang-css -->
body{
    margin:0px;
    padding:0px;
}
div#page{
    width:960px;
    margin:10px auto;
}
div#header{
    width:960px;
    height:80px;
    background-color:lightgray;
}
div#main{
    height:400px;
    width:960px;
    background-color:antiquewhite;
}
p.demo{
 margin:0px;
}

<!-- language: lang-html -->
    <div id="page">
      <div id="header">
        header
      </div>
      <div id="main">
       <p class="demo">we make your business</p>
       <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
      <form action="" method="post">
          <button>about us
                    </button>
        </form>
      </div>
    </div>

Answer 5

快速解决方案

将padding-top:1px;添加到 DIV＃MAIN

智能解决方案

使用 flex ，好处：响应，更少的代码，更可读，现代

/* the main content will take all remaining space, makin it responsive */
html,
body {
  height: 100%;
}
body {
  margin: 0px;
  padding: 0px;
}
div#page {
  /* make page fill all available space*/
  height: 100%;
  /* change predefined value to 100%, and adjust spaces */
  width: 100%;
  padding: 0 10px;
  margin: 10px auto;
  /* flex usage itself */
  display: flex;
  /* place divs horizontally */
  flex-direction: column;
}
div#header {
  height: 80px;
  /* header will not resize when window resized*/
  flex-shrink: 0;
  background-color: lightgray;
}
div#main {
  /* responsive container, remove width/height, any predefined values */
  background-color: antiquewhite;
  flex: 1;
}

<div id="page">
  <div id="header">
    header
  </div>
  <div id="main">
    <p>we make your business</p>
    <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
    <form action="" method="post">
      <button>about us</button>
    </form>
  </div>
</div>

Answer 6

发生的原因是p标签具有自动保证金。更多信息在这里