Css 为什么包装div的填充看起来与内部div的边距不同？

我有两个div

<div id=number1><div id=number2></div></div>

不一样

#number1 {
    background:red;
    padding:10px;
}

#number2 {
   background:blue;
   height: 200px;
}

在第一种情况下，我在顶部和底部得到白线，假设它是div1的红色？ 这是因为“填充”用于“块”到“内容”的距离。 “边距”用于“块”到“块”的距离

在中，您所经历的意外行为是由于“边际崩溃”

规范：

一些简单的阅读：

您可以通过以下方式解决此问题：

• 如您在问题中所做的，在

  #number1

  上使用

  填充

  ，而不是在

  #number2

  上使用

  边距

• 将

  溢出：隐藏
  添加到
  #number1
  ：

• 向编号1添加一些填充：
• 添加<代码>浮动：左；宽度：100%至

  #编号1

  ：
• 添加

  显示：内联块；宽度：100%至
  #编号1
  ：

• 向编号1添加边框：
• 我相信还有更多的方法

---

您能详细说明一下吗？我不明白content div应该是浮动的，它将正常工作#数字1{背景：红色；}#数字2{背景：蓝色；高度：200px；宽度：200px；边距：10px；浮点：左；//在此处添加浮点}

#number1 {
    background:red;
    padding:10px;
}

#number2 {
   background:blue;
   height: 200px;
}