下方有额外空间 <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创建或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容， 高度 ， 最小高度 ，或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。 折叠的保证金最终在父母之外。

您可以从第一个<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标签有一个自动边距。 更多信息在这里