Css 为什么我的盒子会变大？

在一个div中有一个div。外部div的任务是定位框，而内部div的任务是定位文本。这些部门属于较大的部门，但我认为这不是问题所在。当我尝试在外部div上添加填充，或者换句话说，移动长方体时，填充将应用于内部div，因此长方体在该方向上变得更大。左上角总是粘在它所在的另一个div上。如何使填充物应用于盒子的外部而不是内部

以下是格式：

<div style="width:100px;
            height:50px;
            padding-left:10px;
            padding-top:10px;
            border: 3px solid #D8BFD8;
            align:center;">
   <div style="font-size:x-large;
               padding-left:40px;
               padding-top:0px;
               font-family:'Arial';
               color:black;">
     Profile
   </div>
 </div>

轮廓

不太确定，但是通过移动外框，您确定没有错误地用边距填充吗？填充应用于div的内部

我刚换了衣服

padding-left:10px;
padding-top:10px;

到 左边距：10px； 边缘顶部：10px

并增加了它，使其更加明显。还移动了内联css以使其更清晰

---

填充应用于元素内部

来自学校

因此，如果您将填充应用于外部div（宽度为100px的div），则其中的元素会受到影响

您可能希望改为使用边距。或者最好将填充设置为外部div的父级；这样，外部div的父对象内的所有元素将均匀分布

---

我看到您的外部分区有“align:center”。请尝试使用“margin:auto”。

1-为了可读性，通常最好不要将一组语言混合在一起，即使web开发人员不时需要它

因此，将css分离到中，并将其放入或使用css样式表

2-您将需要相对于页面的外部div。所以在css中，位置：相对。和内部div，你想使用一个绝对位置。所以位置：绝对

我冒昧地清理了代码，并将其扔到了JSFIDLE中

但是如果你想把它放到一个html页面中

<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
    position: absolute;
    font-size:x-large;
    padding-left:10px;
    padding-top:0px;
    font-family:'Arial';
    color:black;
}
</style>

<div id="outerbox">
   <div id="innertext">
      Profile
   </div>
 </div>

#外接线盒{
宽度：100px；
高度：50px；
左侧填充：10px；
填充顶部：10px；
边框：3px实心#D8BFD8；
对齐：居中；
位置：相对位置；
}
#内部文本{
位置：绝对位置；
字号：x大号；
左侧填充：10px；
填充顶部：0px；
字体系列：'Arial'；
颜色：黑色；
}
轮廓

别忘了选中帖子上的预览框-你忘了换行，代码片段没有出现！如果你找到了答案，自己加上答案，自己选择。这会把这个问题留给其他可能有同样问题的人。我想出了办法。但是谢谢你给我一些建议！