Html 下方的额外空间<；部门>；要素

id为“header”元素（第二个div）的div后面有一些额外的空间。如果我去掉p，div元素之间就没有空格了。如何在不删除p元素的情况下消除两个div元素之间的空间，以及为什么它会这样做

正文{
边际：0px；
填充：0px；
}
第页{
宽度：960px；
利润率：10px自动；
}
div#头{
宽度：960px；
高度：80px；
背景颜色：浅灰色；
}
主分区{
高度：400px；
宽度：960px；
背景色：仿古白色；
}

标题
我们做你的生意

Con panna有机美式研磨机单一来源白色杯菊苣阿拉伯短科尔塔多。坐着，芳香的伦戈店身红眼

关于我们

如果删除这两个div之间的空格，则添加以下CSS:-

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

---

发生这种情况的原因是

p

标记具有自动边距。更多信息

仅使用*代替body元素

*{
边际：0px；
填充：0px；
}
第页{
宽度：960px；
利润率：10px自动；
}
div#头{
宽度：960px；
高度：80px；
背景颜色：浅灰色；
}
主分区{
高度：400px；
宽度：960px；
背景色：仿古白色；
}

标题
我们做你的生意

Con panna有机美式研磨机单一来源白色杯菊苣阿拉伯短科尔塔多。坐着，芳香的伦戈店身红眼

关于我们

这是因为：

家长和第一个/最后一个孩子
如果没有创建边框、填充、内联内容，或者没有创建边框、填充、内联内容，或者没有创建边框、内联内容，或者没有创建边框、填充、内联内容，或者没有创建边框、内联内容，或者没有创建边框、填充、内联内容，或者没有创建边框、内联内容，或者没有创建边框、内联内容，或者没有创建边框、内联内容，或者没有创建边框、内联内容，或者没有创建边框、内联内容。折叠的页边距最终位于父页边距之外

您可以从第一个

元素中删除

边距顶部

，然后将

填充顶部

添加到

div\main

：

正文{
边际：0px；
填充：0px；
}
第页{
宽度：960px；
利润率：10px自动；
}
div#头{
宽度：960px；
高度：80px；
背景颜色：浅灰色；
}
主分区{
高度：400px；
宽度：960px；
背景色：仿古白色；
填充顶部：15px；
}
第一个孩子{
边际上限：0；
}

标题
我们做你的生意

Con panna有机美式研磨机单一来源白色杯菊苣阿拉伯短科尔塔多。坐着，芳香的伦戈店身红眼

关于我们

请试试这个

<!-- 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>

身体{
边际：0px；
填充：0px；
}
第页{
宽度：960px；
利润率：10px自动；
}
div#头{
宽度：960px；
高度：80px；
背景颜色：浅灰色；
}
主分区{
高度：400px；
宽度：960px；
背景色：仿古白色；
}
p、 演示{
边际：0px；
}
标题
我们让您的业务
Con panna有机美式研磨机单一来源白色杯菊苣阿拉伯短科尔塔多。坐着，芳香的伦戈店身红眼

关于我们

快速解决方案

添加

填充顶部：1px至div#main

智能解决方案

使用flex，优点：响应快、代码少、可读性强、现代化


/*主要内容将占用所有剩余空间，使其具有响应性*/
html，
身体{
身高：100%；
}
身体{
边际：0px；
填充：0px；
}
第页{
/*使页面填满所有可用空间*/
身高：100%；
/*将预定义值更改为100%，并调整间距*/
宽度：100%；
填充：0 10px；
利润率：10px自动；
/*灵活使用本身*/
显示器：flex；
/*水平放置div*/
弯曲方向：立柱；
}
div#头{
高度：80px；
/*调整窗口大小时，标题不会调整大小*/
弹性收缩：0；
背景颜色：浅灰色；
}
主分区{
/*响应容器，删除宽度/高度，任何预定义值*/
背景色：仿古白色；
弹性：1；
}

标题
我们做你的生意

Con panna有机美式研磨机单一来源白色杯菊苣阿拉伯短科尔塔多。坐着，芳香的伦戈店身红眼

关于我们
你需要澄清哪个
div
元素给写“我们做你的生意”的div，
margin top:0
尝试使用css重置。
div#header{width:960px；height:80px；margin bottom:-16px；背景色：浅灰色；}
@rajini-raja它不完全正确，默认情况下，大多数浏览器都会添加页边距，而不仅仅是Webkit浏览器。对你来说这不是问题，问题是。退房，这个案子用Flex？我不这么认为。只有在需要flex的功能时，才应该使用它，而不是在所有情况下，而不是在块级元素中使用它。@SergeyDenisov不同意，我自己一直都在使用flex，它有超级有用的功能，为什么还要为块而烦恼呢？Flex将用
p
解决小的OP问题，但也将有助于防止未来的重构，就像用bazuka杀死两只兔子，给一个人一条鱼，你喂他一天；教一个人钓鱼，你会喂他一辈子，因为我很酷，伙计哈哈：p无论如何，祝你今天我生日快乐