给元素填充会增加总宽度

Question

我有一个div，我想缩进我的文字，从左边说40px。为此，我写了

#rightheader{
    float: right;
    width: 70%;   
    height: 120px;
    background-color: #336699;
    padding-top: 20px; 
}

现在，令人困惑的是，每当我在上面添加padding-left: 40px;时，div的总宽度也会增加。不是padding euivalent to internal indentation.

顺便说一句，如何在不需要修改div宽度的情况下缩进文本？

Answer 1

您想查看 box-sizing: border-box 。

这样可以在框的宽度内计算padding:。

另请阅读 CSS Box Model 。

Answer 2

#rightheader{
    float: right;
    width: 70%;   
    height: 120px;
    background-color: #336699;
    padding-top: 20px;
    text-indent: 40px;
}