Css 使用边框框应用边距时，为什么子div不在中心？ .家长{ 宽度：300px；高度：300px；边框：1px纯红；填充：20px； } .孩子{ 框大小：边框框；利润率：20px；宽度：100%；身高：100%；边框：1px纯蓝色； }_Css

Css 使用边框框应用边距时，为什么子div不在中心？ .家长{ 宽度：300px；高度：300px；边框：1px纯红；填充：20px； } .孩子{ 框大小：边框框；利润率：20px；宽度：100%；身高：100%；边框：1px纯蓝色； }

css

Css 使用边框框应用边距时，为什么子div不在中心？ .家长{ 宽度：300px；高度：300px；边框：1px纯红；填充：20px； } .孩子{ 框大小：边框框；利润率：20px；宽度：100%；身高：100%；边框：1px纯蓝色； },css,Css,我有一个嵌套在父div中的子div，它有一个padding属性。子div也有一个margin属性。我希望child div像下图一样位于中间但是，当我运行代码时，子div会倾斜到右下角我将box size属性设置为border box，以将margin:20px计算为最终的宽度和高度，但结果是相同的。我的问题是1）如何将应用边距的子div居中2）为什么边框框对子div没有任何影响？只需删除边距即可。答案中有一个解释：请记住，框大小：边框框将填充和边框带入宽度/高度计算中，而不是边距。利

我有一个嵌套在父div中的子div，它有一个padding属性。子div也有一个margin属性。我希望child div像下图一样位于中间

但是，当我运行代码时，子div会倾斜到右下角

我将

box size

属性设置为border box，以将

margin:20px

计算为最终的宽度和高度，但结果是相同的。我的问题是1）如何将应用边距的子div居中2）为什么

边框框对子div没有任何影响？
只需删除边距即可。答案中有一个解释：
请记住，框大小：边框框将填充和边框带入宽度/高度计算中，而不是边距。利润总是单独计算的

.parent{
宽度：300px；
高度：300px；
边框：1px纯红；
填充：20px；
}
.孩子{
框大小：边框框；
宽度：100%；
身高：100%；
边框：1px纯蓝色；
}

如果要使其居中，应删除子div的边距，因为边距在子div之外，并将子div推向左侧
这应该行得通
 <style>
      .parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        padding: 20px;
      }
      .child {
        box-sizing: border-box;
        margin: 20px;
        width: 100%;
        height: 100%;
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
  </body>

谢谢你的评论，但是给child div添加填充不会对它本身产生任何影响。另外，我的问题是，当应用边距时，为什么子div不居中。
 <body>
    <style>
      .parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        padding: 20px;
      }
      .child {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border: 1px solid blue;
      }
    </style>

    <div id="app">
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
  </body>

        /* display: flex;
        align-items: center;
        justify-content: center; */