CSS三层div

Question

我的代码：

#Parent {
  border-radius: 8px;
  background-color:#cccdce;
  width:70%;
  height:500px;
  float:left;
}

#child {
  padding:15px;
  border-radius: 8px;
  background-color:blue;
  width:100%;
  height:20px;
  float:left;
}

 <div id="Parent">
   <div id="child">
     <div>aaaa</div>
   </div>
 </div>

我现在拥有的是：

我想知道为什么填充不起作用？是不是padding应该设置父元素和子元素之间的空间？为什么它不起作用和重叠？

我想这样做：

Answer 1

使用flexbox并删除floats，以及您需要在父级而非{child>中设置padding的费用

＆＃13;

＆＃13;

#Parent {
  border-radius: 8px;
  background-color: #cccdce;
  width: 70%;
  height: 500px;
  display:flex;
  padding: 15px;
}

#child {
  padding: inherit;
  border-radius: 16px;
  background-color: blue;
  height: 20px;
  flex:1
}

＆＃13;

<div id="Parent">
  <div id="child">
    aaaa
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将padding移至父级，然后移除floats。这将为您提供预期的结果。

Answer 3

如果你给正确的元素填充它会有所帮助。现在，您正在为孩子分配15px填充。这就是文本和孩子之间有15px空间的原因。如果向父标识添加填充，则创建“父元素和子元素之间的空格”：

#Parent {
  padding: 15px;
}

Answer 4

检查一下。

#Parent {
  border-radius: 8px;
  background-color: black;
  width: 70%;
  height: 500px;
  padding: 15px;
}

#child {
  border-radius: 8px;
  background-color: white;
  padding: 15px;
  height: 470px;
}

#grand {
  border-radius: 8px;
  background-color: blue;
  width: 100%;
  height: 20px;
}

<div id="Parent">
  <div id="child">
    <div id="grand">aaaa</div>
  </div>
</div>