Question

我在div里面有一个div。外部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>

Answer 1

不太确定，但通过移动外盒你确定你没有错误填充边缘？填充应用于div的内部。

我刚刚改变了

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

要保证金左：10px的; 边距：10px的;

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

http://jsfiddle.net/H334r/3/

Answer 2

填充应用于元素内部。

来自W3Schools，The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

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

您可能希望查看使用保证金。或者，如果将填充设置为外部div的父级，则会更好;这样，外部div的父元素内的所有元素将均匀分布。

我看到你的外部div有“align：center”。尝试使用“margin：auto”。

Answer 3

1 - 为了便于阅读，将一堆语言混合在一起通常是一种好习惯，即使Web开发人员偶尔需要它。

将css分开并将其放入或使用css样式表。

2 - 您希望相对于页面具有外部div。所以在css中，position：relative。而内部div，你想要使用绝对位置。所以位置：绝对。

我冒昧地清理代码并将其放在jsFiddle中。 http://jsfiddle.net/w7Ltp/1/

但是如果你想把它扔进一个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>

为什么我的盒子会改变尺寸？

3 个答案: