爲什麼我的箱子更換尺寸？

我有一個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>

來源

2013-08-06 nattynerdy

不要忘記檢查您的文章預覽框 - 你忘了換行和代碼段是沒有顯示出來！ –

如果你想出來添加並回答自己，並自己選擇它。它可以將這個問題保存爲可能存在相同問題的其他人。 – Ahmed

不太清楚，但通過移動外包裝箱你確定你有保證金不誤填充？填充應用於div的內部。

我只是改變

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

到保證金左：10px的; margin-top：10px;

並增加它使其更加明顯。還移動了內聯CSS來使其更清晰。

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

來源

2013-08-06 16:46:24 mickadoo

填充是一個元件的內部施加。

從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.

所以，如果你申請填充到你的外格（分度，寬度100像素），它裏面的元素是會受到影響的人。

你可能想看看使用margin來代替。或者，如果將填充設置爲外部div的父級，則會更好;因此，外部div的父級內的所有元素將均勻分佈。

我看到你有「align：center」你的外部div。嘗試使用「margin：auto」。

來源

2013-08-06 16:47:43

1 - 爲了便於閱讀，儘管web開發人員不時需要它，但通常不會混淆一堆語言。

因此，將css分離並放入或使用css樣式表。

2 - 您將需要具有相對於頁面的外部div。所以在CSS中，位置：相對。而內部的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>

來源

2013-08-06 16:47:59

我想出瞭如何做到這一點。但是謝謝你給我一些提示！ – nattynerdy

爲什麼我的箱子更換尺寸？

回答

相關問題